Question

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

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

所以当点击添加按钮我需要的是我需要克隆＆＃34;匹配，产品/ kpi和添加按钮＆＃34;领域。我怎样才能完成这项任务。我尝试过cloneconfig（）。但是无法实现它。提前谢谢。

Answer 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 中，我使用您的代码作为参考创建了一个演示。希望这有助于/指导您实现您的要求。

CODE SNIPPET

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

在extjs中克隆容器

1 个答案: