Extjs - 覆盖折叠功能答案

【问题标题】：Extjs - override collapse functionExtjs - 覆盖折叠功能
【发布时间】：2020-01-02 17:25:37
【问题描述】：

我是 Extjs 的新手；我有一个带有“可折叠：真”项目的面板，它工作正常，但是...... 当我的特定条件为真时，我想折叠面板，并且我想禁用用于展开它的按钮（因此即使单击，面板也不再显示）。有可能做到吗？我想要一种可以做其他事情的覆盖方法，例如在页面中显示一个包含很少特定信息的 div。我只使用 javascript 和 Extjs。

提前致谢，节日快乐

【问题讨论】：

我添加了以下代码：Ext.getCmp('idPanel).collapse();当我的条件为真时，但现在我想禁用展开按钮并将其替换为另一个函数。
我已经隐藏了折叠/展开按钮，并且当代码执行此操作时，我已经启用了对显示我的信息弹出窗口的 div 的单击。我不知道为什么如果我禁用按钮而不使其不可见，按钮仍然处于启用状态

标签： extjs overriding expand

【解决方案1】：

我添加了一个可绑定的版本

Fiddle

使用collapsible 的数据绑定，您还可以将绑定添加到collapsed 参数

【讨论】：

【解决方案2】：

请看我的sn-p。它可以解决您的问题吗？如果您有任何问题，请告诉我。 https://fiddle.sencha.com/fiddle/1fk9

Ext.application({
name : 'Fiddle',

launch : function() {
    var parent = Ext.create('Ext.container.Container', {
        title : 'Demo',
        renderTo : Ext.getBody(),
        layout : 'vbox',
        items : [{
            xtype : 'checkbox',
            fieldLabel : 'Enable collapsible',
            handler : function(self, v){
                var panel = parent.down('panel');
                panel.collapseTool.setVisible(v);

                panel.getHeader().down('tool[type=up]').setVisible(!v);
            },
            checked : true
        }, {
            xtype : 'panel',
            width : 500,
            height : 400,
            title : 'Collapsible demo',
            collapsible : true,
            tools : [{
                type : 'up',
                hidden : true
            }]
        }]
    });
}

});

【讨论】：

感谢您的快速回答。除了将容器的折叠/展开按钮设置为不可见之外，还有一种方法可以禁用它并将此按钮与另一个功能绑定，与本机折叠/展开不同？
@sengy 我更新了我的小提琴链接。我添加了一个类型为up 的隐藏标题工具。当需要在某些情况下禁用可折叠行为时，我隐藏了 collapseTool 并显示了up 工具。这是解决您的问题的解决方法吗？我认为覆盖默认的展开/折叠行为有点复杂。