ExtJS中实现容器克隆：点击添加按钮生成相同容器

我需要实现点击添加按钮时，重复生成包含match下拉框、Product/KPI下拉框及添加按钮的容器。以下是我的代码片段：

var rulepanel = Ext.apply(me, { 
    items: [{ 
        xtype: 'uxform', 
        id: 'rule', 
        bodyPadding: 10, 
        items: [{ 
            xtype: 'container', 
            items: [{ 
                xtype: 'combobox', 
                fieldLabel: 'match', 
                name: 'name', 
                allowBlank: false, 
                placeholder: 'match' 
            }] 
        }, { 
            xtype: 'container', 
            layout: { type: 'hbox', align: 'stretch' }, 
            items: [{ 
                xtype: 'combobox', 
                fieldLabel: 'Product/KPI', 
                name: 'name', 
            }, { 
                xtype: 'button', 
                id: 'add', 
                text: 'Add', 
                handler: function(button, event) { 
                    //rulepanel.insert(0, Ext.create(rulepanel.model)); 
                    // so here how can I add it 
                } 
            }], 
        }] 
    }] 
}); 

我曾尝试使用cloneConfig()方法，但未能成功实现，恳请帮忙解决该问题。

解决方案 #

别担心，咱们一步步来搞定这个问题。之前用cloneConfig()失败，大概率是因为克隆了已渲染的组件，或者没处理好ID冲突、事件绑定这些细节。咱们换个更可靠的思路：把要重复生成的容器封装成可复用的配置，每次点击按钮都基于这个配置创建全新的组件实例。

步骤1：抽离可复用的行配置 #

先把包含Product/KPI下拉框和Add按钮的容器单独抽成一个配置对象，这样每次添加时直接用它生成新组件：

// 定义可复用的规则行配置
var ruleRowConfig = {
    xtype: 'container',
    layout: { type: 'hbox', align: 'stretch' },
    margin: '5 0', // 增加上下间距，让布局更清爽
    items: [{
        xtype: 'combobox',
        fieldLabel: 'Product/KPI',
        name: 'productKpi[]', // 用数组形式的name，方便后端接收多个值
        flex: 1,
        margin: '0 5 0 0', // 给按钮留一点间距
        allowBlank: false
    }, {
        xtype: 'button',
        text: 'Add',
        handler: function(button) {
            // 找到目标form容器（通过id定位）
            var targetForm = button.up('#rule');
            // 基于配置创建新的规则行
            var newRuleRow = Ext.widget(ruleRowConfig);
            // 将新行添加到form的末尾
            targetForm.add(newRuleRow);
        }
    }]
};

步骤2：修改原panel配置 #

把初始的规则行替换成咱们定义的配置，同时优化一下match下拉框的配置（比如修改name避免冲突）：

var rulepanel = Ext.apply(me, { 
    items: [{ 
        xtype: 'uxform', 
        id: 'rule', 
        bodyPadding: 10,
        items: [{ 
            xtype: 'container',
            margin: '0 0 5 0',
            items: [{ 
                xtype: 'combobox', 
                fieldLabel: 'match', 
                name: 'matchType', // 修改name，避免和后续组件冲突
                allowBlank: false, 
                placeholder: 'Select match type' 
            }] 
        }, 
        // 初始添加一行规则行
        ruleRowConfig
        ] 
    }] 
}); 

关键注意事项 #

• 禁止重复ID：千万别给Add按钮设置固定id，重复添加后会触发ExtJS的ID冲突报错，我们直接去掉id: 'add'就行。
• name属性优化：用productKpi[]这种数组形式的name，后端可以直接接收到多个下拉框的值；如果不需要数组，也可以给每个新组件的name加动态后缀（比如productKpi_${Date.now()}）。
• 正确定位父容器：用button.up('#rule')通过id快速找到目标form，不管按钮在哪个层级都能准确找到要添加组件的容器。

这样修改后，每次点击Add按钮都会生成一个全新的包含下拉框和按钮的容器，完美实现你要的效果~

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