Javascript 在extjs中克隆容器

当我单击add按钮时，它需要再次添加相同的容器。下面是我给出的代码段

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
                }
            }],
        }]
    }]
});

---

因此，当单击添加按钮时，我需要的是克隆“匹配、产品/kpi和添加按钮”字段。我怎样才能完成这项任务。我已尝试使用cloneconfig（）。但没能实现。提前感谢。

在ExtJs中，您可以创建自己的通用组件，并在应用程序中需要时随时重用。你需要使用

定义类或重写。基本类的定义如下：

在这个中，我使用您的代码作为参考创建了一个演示。希望这将帮助/指导您实现您的要求

代码片段

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('ProductKpi', {
            extend: 'Ext.container.Container',
            xtype: 'productkpi',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            margin:5,
            items: [{
                xtype: 'combobox',
                flex:1,
                fieldLabel: 'Product/KPI',
                name: 'name',
            }, {
                xtype: 'button',
                margin:'0 5',
                text: 'Add',
                handler: function (button, event) {
                    button.up('#rule').add({
                        xtype: 'productkpi'
                    })
                }
            }],
        });
        Ext.create('Ext.form.Panel', {
            title: 'Demo',
            renderTo: Ext.getBody(),
            id: 'rule',
            bodyPadding: 10,
            items: [{
                xtype: 'container',
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'match',
                    name: 'name',
                    allowBlank: false,
                    placeholder: 'match'
                }]
            }, {
                xtype: 'productkpi'
            }]
        });
    }
});

---

如果您创建一些fiddle，您就可以将应该复制的零件移动到其自己的

Ext.define

块中，从而使其明确可重用。然后，您可以使用

Ext.create

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.define('ProductKpi', {
            extend: 'Ext.container.Container',
            xtype: 'productkpi',
            layout: {
                type: 'hbox',
                align: 'stretch'
            },
            margin:5,
            items: [{
                xtype: 'combobox',
                flex:1,
                fieldLabel: 'Product/KPI',
                name: 'name',
            }, {
                xtype: 'button',
                margin:'0 5',
                text: 'Add',
                handler: function (button, event) {
                    button.up('#rule').add({
                        xtype: 'productkpi'
                    })
                }
            }],
        });
        Ext.create('Ext.form.Panel', {
            title: 'Demo',
            renderTo: Ext.getBody(),
            id: 'rule',
            bodyPadding: 10,
            items: [{
                xtype: 'container',
                items: [{
                    xtype: 'combobox',
                    fieldLabel: 'match',
                    name: 'name',
                    allowBlank: false,
                    placeholder: 'match'
                }]
            }, {
                xtype: 'productkpi'
            }]
        });
    }
});