ExtJS 4.2：如何保持Ext.Window关闭按钮可见并禁用它

要实现关闭按钮保持可见但临时禁用的效果，你可以直接操作Ext.Window头部的关闭按钮组件，利用按钮的setDisabled()方法控制其状态，具体实现如下：

核心思路 #

Ext.Window的关闭按钮是一个标准的Ext.button.Button组件，你可以通过窗口的getHeader()方法获取头部容器，再通过getComponent('close')定位到关闭按钮，之后调用setDisabled(true)（禁用）或setDisabled(false)（启用）即可。

代码示例 #

1. 基础场景：手动控制按钮状态

// 创建窗口实例
var myWindow = Ext.create('Ext.Window', {
    title: '测试窗口',
    width: 400,
    height: 300,
    closable: true, // 确保关闭按钮可见
    items: [
        {
            xtype: 'button',
            text: '禁用关闭按钮',
            handler: function() {
                // 获取关闭按钮并禁用
                var closeBtn = myWindow.getHeader().getComponent('close');
                closeBtn.setDisabled(true);
            }
        },
        {
            xtype: 'button',
            text: '启用关闭按钮',
            handler: function() {
                var closeBtn = myWindow.getHeader().getComponent('close');
                closeBtn.setDisabled(false);
            }
        }
    ]
});

myWindow.show();

2. 业务场景：根据表单状态自动控制

比如窗口内有必填表单，未填写完成时禁用关闭按钮：

Ext.define('MyApp.view.FormWindow', {
    extend: 'Ext.Window',
    xtype: 'formwindow',
    title: '带验证的窗口',
    width: 400,
    height: 300,
    closable: true,
    items: [
        {
            xtype: 'form',
            reference: 'mainForm',
            margin: 10,
            items: [
                {
                    xtype: 'textfield',
                    fieldLabel: '必填内容',
                    allowBlank: false,
                    listeners: {
                        change: function(field) {
                            var form = field.up('form');
                            var closeBtn = this.up('window').getHeader().getComponent('close');
                            // 表单验证通过则启用按钮，否则禁用
                            closeBtn.setDisabled(!form.isValid());
                        }
                    }
                }
            ]
        }
    ],
    initComponent: function() {
        this.callParent(arguments);
        // 初始化时默认禁用关闭按钮
        var closeBtn = this.getHeader().getComponent('close');
        closeBtn.setDisabled(true);
    }
});

// 调用窗口
Ext.create('MyApp.view.FormWindow').show();

说明 #

• 禁用后的关闭按钮会保持可见，但呈现灰色不可点击状态，符合你的需求；
• 该方法适用于大多数Ext JS版本（Ext JS 4+均支持），无需修改窗口的初始配置。

内容的提问来源于stack exchange，提问作者SensacionRC