Question

我正在尝试显示不同的数据（来自不同的商店和型号），在按钮点击时贬值但在某些时候失败（坦率地说，我不知道如何使用重新配置功能）。以下是我的代码：

组件和按钮单击功能：

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和Model 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或未定义。请帮忙......

Answer 1

如果您对所有操作使用相同的网格，则更改商店的代理URL以执行各种操作，并使用load（）方法将数据填充到网格中!!

在extjs4中单击按钮时动态数据的静态网格

1 个答案: