单击按钮显示和隐藏面板

Question

如图所示，我有一个“隐藏”按钮。单击“隐藏”按钮，我希望隐藏左侧面板，右侧面板覆盖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似乎没有用。 有什么可以解决这个问题？

感谢任何帮助。

Answer 1

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

然而，只看你的形象，我在这里做一个假设。 如果要隐藏的是左侧面板，其中包含以下内容

那么也许，你可以做的是在“DIV”html中声明LEFT和RIGHT面板后进行jQuery切换  标签例如。见下面的链接。

jQuery API for toggle

此外，如果您正在使用Javascript库或工具来构建它，那么您可能希望获得Javascript的源代码并深入了解它。

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

Answer 2

Ext.getCmp（ 'workItemPanel'）隐藏（）;

对我来说效果很好。