3

私は ExtJs 4.1 を使用しており、項目をパネルに、列をグリッドに動的に追加しようとしています。

私の要件

MainPanel(Ext.panel.Panel)には 2 つの子項目があります。

  • 動的パネル(Ext.panel.Panel)

    1. このパネルをメインパネルに動的に追加したい。
    2. 次に... DynamicPanel に項目を動的に追加したいのですが、項目は「要素」と呼ばれるMainPanelの構成です。

  • ダイナミックグリッド(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'
    }]
});
4

1 に答える 1

4

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に列を動的に追加する例をご覧ください。

于 2012-12-17T00:47:29.553 に答える