靜態網格​​與按鈕點擊在extjs4動態數據

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

}); 

商店1和模式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);，但它引發了一個錯誤，指出數據爲空或未定義。請幫助...

Answer 1

如果您對所有操作使用相同的網格，則更改商店的各種操作的代理URL並使用load（）方法將數據填充到網格！