Question

我正在使用ExtJs 4.1并尝试动态地将项目添加到面板和列到网格。

我的要求

MainPanel (Ext.panel.Panel)有2个子项：

DynamicPanel (Ext.panel.Panel)
1. 我想动态地将此面板添加到主面板。
2. 然后......我想动态地向DynamicPanel添加项目，这些项目是 MainPanel 的配置：“elements”
DynamicGrid (Ext.grid.Panel)
1. 我想再次将其添加到主面板中。
2. 我想动态地向DynamicGrid添加列，并且这些列也是 MainPanel 配置gridcolumns的一部分。

我收到以下错误：

this.dpanel未定义
[打破此错误] this.dpanel.add（this.elements）

我的代码如下：

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone', 'date', 'time'],
    data: {
        'items': [{
            "name": "Lisa",
                "email": "[EMAIL="
            lisa@simpsons.com "]lisa@simpsons.com[/EMAIL]",
                "phone": "555-111-1224",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Bart",
                "email": "[EMAIL="
            bart@simpsons.com "]bart@simpsons.com[/EMAIL]",
                "phone": "555-222-1234",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Homer",
                "email": "[EMAIL="
            home@simpsons.com "]home@simpsons.com[/EMAIL]",
                "phone": "555-222-1244",
                "date": "12/21/2012",
                "time": "12:22:33"
        }, {
            "name": "Marge",
                "email": "[EMAIL="
            marge@simpsons.com "]marge@simpsons.com[/EMAIL]",
                "phone": "555-222-1254",
                "date": "12/21/2012",
                "time": "12:22:33"
        }]
    },
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});
Ext.define('DynamicGridPanel', {
    extends: 'Ext.grid.Panel',
    alias: 'widget.dynamicGridPanel',
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    selType: 'rowmodel',
    plugins: [
    Ext.create('Ext.grid.plugin.CellEditing', {
        clicksToEdit: 1
    })],
    height: 200,
    width: 200
});

Ext.define('DynamicPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dynamicPanel',
    title: 'DynamicAdd',
    width: 200,
    height: 200
});
Ext.define('MainPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.dynamicMainPanel',
    title: 'MainPanel',
    renderTo: Ext.getBody(),
    width: 600,
    height: 600,
    constructor: function (config) {
        var me = this;
        me.callParent(arguments);
        me.dpanel = Ext.create('DynamicPanel');
        me.dgridpanel = Ext.create('DynamicGridPanel');
        me.items = [this.dpanel, this.dgridpanel];
    }, //eo constructor
    onRender: function () {
        var me = this;
        me.callParent(arguments);
        //I am getting  error at the below lines saying the dpanel and dynamicGridPanel  undefined
        me.dpanel.add(this.elements);
        me.dynamicGridPanel.columns.add(this.gridcolumns);
    }
});
var panel1 = Ext.create('MainPanel', {
    gridcolumns: [{
        xtype: 'actioncolumn',
        width: 42,
        dataIndex: 'notes',
        processEvent: function () {
            return false;
        }
    }, {
        xtype: 'gridcolumn',
        header: 'Name',
        dataIndex: 'name',
        editor: 'textfield'
    }, {
        xtype: 'gridcolumn',
        header: 'Email',
        dataIndex: 'email',
        flex: 1,
        editor: {
            xtype: 'textfield',
            allowBlank: false
        }
    }, {
        header: 'Phone',
        dataIndex: 'phone'
    }, {
        xtype: 'gridcolumn',
        header: 'Date',
        dataIndex: 'date',
        flex: 1,
        editor: {
            xtype: 'datetextfield',
            allowBlank: false
        }
    }, {
        xtype: 'gridcolumn',
        header: 'Time',
        dataIndex: 'time',
        flex: 1,
        editor: {
            xtype: 'timetextfield',
            allowBlank: false
        }
    }],
    elements: [{
        xtype: 'numberfield',
        width: 70,
        tabIndex: 1,
        fieldLabel: 'Account No',
        itemId: 'acctno',
        labelAlign: 'top'
    }, {
        xtype: 'textfield',
        itemId: 'lastname',
        width: 90,
        tabIndex: 2,
        fieldLabel: 'Last Name',
        labelAlign: 'top'
    }, {
        xtype: 'textfield',
        itemId: 'firstname',
        width: 100,
        tabIndex: 3,
        fieldLabel: 'First Name',
        labelAlign: 'top'
    }]
});

Answer 1

在initComponent中创建子元素：

initComponent: function() {
   var me = this;
   me.dpanel = Ext.create('DynamicPanel');
   me.dgridpanel = Ext.create('DynamicGridPanel');
   me.items = [this.dpanel, this.dgridpanel]; 
   me.callParent(arguments);
}

不要忘记为网格中的列定义require配置：

columns: []

请在此处查看示例，以便在网格http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html

中添加动态列

动态地将项添加到面板和列到网格

1 个答案: