Ext JS中勾选特定复选框时如何动态控制关联文本框显隐

核心逻辑非常简单，不需要手动操作DOM，利用Ext JS自带的组件事件和显隐API就能实现，核心思路如下：

• 给「启用邮件」复选框绑定change事件，监听选中状态变化
• 把To、CC、BCC三个输入框统一放在一个容器组件里，事件触发时直接控制整个容器的显隐，比单独操作每个输入框效率更高，后续扩展也方便
• 初始化时保证容器的隐藏状态和复选框的默认选中状态一致，避免首次加载状态错位

可直接复用的代码示例（兼容Ext JS 4.x ~ 7.x全版本） #

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title: '邮件配置面板',
    width: 580,
    bodyPadding: 16,
    items: [
        // 控制显隐的核心复选框
        {
            xtype: 'checkbox',
            fieldLabel: '开启邮件通知',
            itemId: 'enableEmailCheck',
            checked: false, // 默认未选中
            listeners: {
                change: function(checkCmp, isChecked) {
                    // 向上找到表单，再定位到邮件字段容器
                    const emailFieldsBox = checkCmp.up('form').down('#emailFieldsContainer');
                    // 直接传选中状态控制显隐，不需要额外写if判断
                    emailFieldsBox.setVisible(isChecked);
                }
            }
        },
        // 存放三个邮件输入框的容器，统一控制显隐
        {
            xtype: 'container',
            itemId: 'emailFieldsContainer',
            hidden: true, // 默认隐藏，和复选框初始状态对齐
            margin: '12 0 0 0',
            defaults: {
                xtype: 'textfield',
                anchor: '100%',
                labelWidth: 55,
                margin: '0 0 8 0',
                allowBlank: false // 示例配置：显示时必填
            },
            items: [
                {
                    fieldLabel: 'To',
                    emptyText: '输入收件人邮箱，多地址用分号分隔',
                    name: 'emailTo'
                },
                {
                    fieldLabel: 'CC',
                    emptyText: '输入抄送人邮箱',
                    name: 'emailCc'
                },
                {
                    fieldLabel: 'BCC',
                    emptyText: '输入密送人邮箱',
                    name: 'emailBcc'
                }
            ]
        }
    ]
});

常见踩坑提醒 #

• 不要手动写原生JS操作DOM改元素的display属性，会破坏Ext JS的布局渲染逻辑，大概率出现输入框位置错位、组件事件失效的问题，统一用组件自带的setVisible()方法即可。
• 如果表单提交时不想校验隐藏状态下的输入框，给外层容器加配置项listeners: { hide: function(cmp){ cmp.setSkipValidation(true); }, show: function(cmp){ cmp.setSkipValidation(false); } }即可，避免隐藏字段校验不通过阻塞表单提交。
• 如果是Ext JS 4.x等不支持ES6语法的老版本，把代码里的const替换成var就能直接运行，其他API没有差异。
• 不要给三个输入框分别绑定显隐逻辑，后续加邮件主题、附件等字段时，只要放在同一个容器里就会自动跟随显隐，不需要改监听代码。

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