1

ボタンのクリックに応じて（異なるストアとモデルからの）異なるデータを表示しようとしていますが、ある時点で失敗します（率直に言って、再構成機能の使用方法がわかりません）。以下は私のコードです：

コンポーネントとボタンクリック機能：

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.panel.Panel',

    height: 328,
    width: 478,
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'button',
                    text: 'Button1'
                },
                {
                    xtype: 'button',
                    text: 'Button2',
                    listeners: {
                        click: {
                            fn: me.onButtonClick,
                            scope: me
                        }
                    }
                },
                {
                    xtype: 'button',
                    text: 'Button3'
                },
                {
                    xtype: 'gridpanel',
                    id: 'myGrid',
                    title: 'My Grid Panel',
                    store: 'Button1Store',
                    columns: [
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'Name',
                            text: 'Name'
                        },
                        {
                            xtype: 'gridcolumn',
                            dataIndex: 'Email',
                            text: 'Email'
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onButtonClick: function(button, e, eOpts) {
        //alert("button 2");

        var gridVar = Ext.getCmp('myGrid');
        var newStore = Ext.getCmp('MyStore2');
        //alert( gridVar.columns[0].dataIndex);
        //gridVar.bindStore(newStore);
        gridVar.reconfigure(newStore, gridVar.columns);
    }

});

Store1とモデル1：

Ext.define('MyApp.store.Button1Store', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Button1Model'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            model: 'MyApp.model.Button1Model',
            storeId: 'MyStore1',
            data: [
                {
                    Name: '1',
                    Email: 'test1'
                },
                {
                    Name: '2',
                    Email: 'test2'
                },

            ]
        }, cfg)]);
    }
});

Ext.define('MyApp.model.Button1Model', {
    extend: 'Ext.data.Model',

    idProperty: 'Button1Model',

    fields: [
        {
            name: 'Name'
        },
        {
            name: 'Email'
        }
    ]
});

ストア2とモデル2：

Ext.define('MyApp.store.Button2Store', {
    extend: 'Ext.data.Store',

    requires: [
        'MyApp.model.Button2Model'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            model: 'MyApp.model.Button2Model',
            storeId: 'MyStore2',
            data: [
                {
                    Name: '3',
                    Email: 'test3'
                },
                {
                    Name: '4',
                    Email: 'test4'
                }
            ]
        }, cfg)]);
    }
});

Ext.define('MyApp.model.Button2Model', {
    extend: 'Ext.data.Model',

    fields: [
        {
            name: 'Name'
        },
        {
            name: 'Email'
        }
    ]
});

これを試してみると、グリッド内のタイトルとデータが消えてしまいます。試しましたgridVar.bindStore(newStore);が、データがnullまたは未定義であることを示すエラーがスローされました。plsは助けます...

4

1 に答える 1

0

すべてのアクションに同じグリッドを使用している場合は、さまざまなアクションのストアのプロキシURLを変更し、load（）メソッドを使用してデータをグリッドに入力します。

于 2013-03-20T12:25:46.213 に答える