Ext.js TabPanel：如何将选中标签作为表单参数提交？

你当前通过监听每个标签的activate事件更新隐藏域的方式是可行的，但确实存在更简洁的实现，不用给每个标签单独绑定监听，还能减少冗余操作：

方案1：表单提交时一次性获取活跃标签信息 #

不用实时更新隐藏域，只在表单提交前，主动获取TabPanel的活跃标签信息并赋值给隐藏域，这样代码更精简：

// 假设可以通过ID或组件查询获取TabPanel实例
var tabPanel = Ext.getCmp('reportTabPanel'); 
// 或者用表单的组件查询方法：form.down('tabpanel')

// 在表单提交前执行这段逻辑
document.forms[0].upit.value = tabPanel.getActiveTab().value;
// 也可以直接用活跃标签的索引：tabPanel.getActiveTabIndex()

如果使用Ext原生的FormPanel，可以在它的beforeSubmit事件里统一处理：

Tm.Report.createForm({
    // 其他表单配置
    listeners: {
        beforeSubmit: function(form) {
            // 获取表单内的TabPanel组件
            var tabPanel = form.down('tabpanel');
            // 找到隐藏字段并赋值
            form.findField('upit').setValue(tabPanel.getActiveTab().value);
            return true; // 允许表单提交
        }
    },
    items: [
        new Ext.form.TextField({
            name: 'upit',
            value: '0',
            hidden: true
        }),
        new Ext.TabPanel({
            id: 'reportTabPanel',
            activeTab: 0,
            items: [
                {
                    value: 0,
                    items: [/* 标签内容 */]
                },
                {
                    value: 1,
                    items: [/* 标签内容 */]
                }
            ]
        })
    ]
});

方案2：给TabPanel绑定统一的切换事件 #

如果还是需要实时更新隐藏域，不用给每个标签单独加activate监听，直接给TabPanel绑定tabchange事件，一次监听覆盖所有标签切换：

new Ext.TabPanel({
    activeTab: 0,
    listeners: {
        tabchange: function(tabPanel, activeTab) {
            // 更新隐藏域值
            document.forms[0].upit.value = activeTab.value;
            // 用Ext表单字段方法的写法：
            // Ext.getCmp('yourFormId').findField('upit').setValue(activeTab.value);
        }
    },
    items: [
        {value: 0, items: [/* 标签内容 */]},
        {value: 1, items: [/* 标签内容 */]}
    ]
})

这两种方式都比你原来的实现更简洁，尤其是方案1，只在必要的提交时机处理，避免了不必要的DOM操作。

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