在 extjs 中克隆一个容器答案

【问题标题】：Clone a container in extjs在 extjs 中克隆一个容器
【发布时间】：2018-05-15 04:49:24
【问题描述】：

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

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()。但达不到。提前致谢。

【问题讨论】：

如果你能创造一些小提琴就好了
您可以将应该复制的部分移动到它自己的Ext.define 块中，从而使其明确可重用。然后您可以使用Ext.create 轻松创建多个实例

标签： javascript extjs containers

【解决方案1】：

在 ExtJs 中，您可以像通用一样创建自己的组件，并且可以在应用程序需要时重复使用。你需要使用Ext.define

定义一个类或覆盖。一个基本类是这样定义的：

Ext.define('My.awesome.Class', {
     someProperty: 'something',

     someMethod: function() {
         alert(s + this.someProperty);
     }

     ...
 });

 var obj = new My.awesome.Class();

 obj.someMethod('Say '); // alerts 'Say something'

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

代码片段

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

【讨论】：