单击按钮时显示和隐藏面板答案

【问题标题】：Show and Hide a panel on button click单击按钮时显示和隐藏面板
【发布时间】：2012-05-06 19:06:30
【问题描述】：

如图所示，我有一个“隐藏”按钮。单击“隐藏”按钮时，我希望隐藏左侧面板，而右侧面板覆盖 100% 的屏幕。这样做时，“隐藏”按钮将更改为显示面板返回到其原始位置的位置。

为了做同样的事情

xtype:'toolbar',
            docked:'top',
            items:[
                {
                    cls:'hide',
                    xtype:'button',
                    text:"Hide",
                    iconMask:true,
                    ui:'back',
                    id:'hide',
                    handler:function () {

                        var viewWidth = Ext.Viewport.getWindowWidth();
                        alert(viewWidth);
                        desiredWidth = Math.min(viewWidth, 400) - 10;
                        Ext.fly('protocol').setStyle('width', desiredWidth); ;

                    }
                },

我尝试使用上面的代码动态更改面板的宽度，但 Ext.fly 似乎不起作用。有什么办法可以解决这个问题？

感谢任何帮助。

【问题讨论】：

标签： panel show-hide sencha-touch-2

【解决方案1】：

左侧面板的亮点将不胜感激。

但是，仅查看您的图像，我就在这里做出假设。如果您只想隐藏包含以下内容的左侧面板

那么，您可以做的是在“DIV”html 中声明 LEFT 和 RIGHT 面板后执行 jQuery 切换以标签为例。请参阅下面的链接。

jQuery API for toggle

另外，如果您使用 Javascript 库或工具来构建它，那么您可能需要获取 Javascript 的源代码并深入研究。

根据我的经验，自己编写 Javascript 函数比使用现成的东西要容易得多。

【讨论】：

开始，是的，你是对的。那就是我要隐藏的面板。我正在使用 Sencha touch 2 来构建它，而 sencha 中使用的 javascript 与其他的不同。我不确定如何合并 Sencha javascript 中的 jquery 代码来隐藏面板。

【解决方案2】：

Ext.getCmp('workItemPanel').hide();

对我来说效果很好。

【讨论】：