动态添加项目到面板和列到网格答案

【问题标题】：add items to panel and columns to grid dynamically动态添加项目到面板和列到网格
【发布时间】：2012-12-15 19:41:26
【问题描述】：

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

我的要求

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

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

我收到以下错误：

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

【问题讨论】：

@Reimius 我之所以放代码是因为它不起作用并且我已经尝试了很多，如果它是基本的，那么你最好通过发送链接或回答而不是仅仅投票来帮助我，因为那将帮助您获得良好的声誉分数，如果您的答案是正确的，我一定会将其标记为答案。
@Reimius 感谢好友反复查看我的论坛 qts 并为我发布的所有消息付出了如此痛苦的回答，即使您认为不值得回答（或者您也在寻找的答案，所以要求额外的赏金）反正得到了答案，真的很感谢你不回答和争论的努力。祝你好运....
我只是在您没有将以下答案标记为正确之后才发表评论，但您似乎认为他是对的。我对这个答案投了赞成票，哈哈。
+1。我希望你吸取教训 Reimius。

标签： extjs extjs4 extjs4.1 extjs4.2 extjs-grid

【解决方案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);
}

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

columns: []

查看此处的示例以在网格中动态添加列http://neiliscoding.blogspot.de/2011/09/extjs4-dynamically-add-columns.html

【讨论】：