ext js同一網格的多個實例

Question

我遇到了一個ext js網格的多個實例都顯示相同數據的問題。我正在使用Ext js 4.1.1。

我有一個主選項卡面板。在該面板中，有多個人選項卡。在每個人標籤內都有一個詳細信息標籤和一個家庭標籤。

詳細信息選項卡是一個帶有文本框，組合框等的簡單表單。系列選項卡包含數據視圖和網格。

如果一次只打開一個人標籤，則一切正常。一旦打開第二個人，家庭標籤看起來是相同的（包括數據視圖和網格）。在我看來，這個問題與模型有關。也許他們正在共享模型的同一個實例，並且導致一次刷新來更改所有數據。 dataview和網格都有同樣的問題，但我認爲如果我可以解決網格問題，那麼我可以應用相同的邏輯來修復數據視圖。除非這個問題變得相關，否則我將把這個問題的代碼留給這個問題。

PersonTab.js

Ext.require('Client.view.MainTab.PersonDetailsForm'); 
Ext.require('Client.view.MainTab.PersonFamilyForm'); 
Ext.require('Client.view.MainTab.EventForm'); 

Ext.define('Client.view.MainTab.PersonTab', 
{ 
    extend: 'Ext.tab.Panel', 
    waitMsgTarget: true, 
    alias: 'widget.MainTabPersonTab', 
    layout: 'fit', 
    activeTab: 0, 
    tabPosition: 'bottom', 
    items: 
     [ 
      { 
       title: 'Details', 
       closable: false, 
       xtype: 'MainTabPersonDetailsForm' 
      }, 
      { 
       title: 'Family', 
       closable: false, 
       xtype: 'MainTabPersonFamilyForm' 
      }, 
      { 
       title: 'page 3', 
       closable: false, 
       xtype: 'MainTabEventForm' 
      } 
     ] 
}); 

MainTabPersonFamilyForm.js

Ext.require('Client.view.MainTab.PersonFamilyHeadOfHouseholdDataView'); 
Ext.require('Client.view.MainTab.PersonFamilyGrid'); 

Ext.define('Client.view.MainTab.PersonFamilyForm', 
{ 
    extend: 'Ext.form.Panel', 
    alias: 'widget.MainTabPersonFamilyForm', 
    waitMsgTarget: true, 
    padding: '5 0 0 0', 
    autoScroll: true, 
    items: 
     [ 
      { 
       xtype: 'displayfield', 
       name: 'HeadOfHouseholdLabel', 
       value: 'The head of my household is:' 
      }, 
      { 
       xtype: 'MainTabPersonFamilyHeadOfHouseholdDataView' 
      }, 
      { 
       xtype: 'checkboxfield', 
       boxLabel: "Use my Head of Household's address as my address", 
       boxLabelAlign: 'after', 
       inputValue: true, 
       name: 'UseHeadOfHouseholdAddress', 
       allowBlank: true, 
       padding: '0 20 5 0' 
      }, 
      { 
       xtype: 'MainTabPersonFamilyGrid' 
      } 
     ], 
    config: 
     { 
      idPerson: '' 
     } 
}); 

MainTabPersonFamilyGrid.js

Ext.require('Client.store.PersonFamilyGrid'); 
Ext.require('Ext.ux.CheckColumn'); 

Ext.define('Client.view.MainTab.PersonFamilyGrid', 
{ 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.MainTabPersonFamilyGrid', 
    waitMsgTarget: true, 
    padding: '5 0 0 0', 
    xtype: 'grid', 
    title: 'My Family Members', 
    store: Ext.create('Client.store.PersonFamilyGrid'), 
    plugins: Ext.create('Ext.grid.plugin.CellEditing'), 
    viewConfig: 
     { 
      plugins: 
       { 
        ptype: 'gridviewdragdrop', 
        dragGroup: 'PersonFamilyGridTrash' 
       } 
     }, 
    columns: 
     [ 
      { text: 'Name', dataIndex: 'Name'}, 
      { text: 'Relationship', dataIndex: 'Relationship', editor: { xtype: 'combobox', allowblank: true, displayField: 'display', valueField: 'value', editable: false, store: Ext.create('Client.store.Gender') }}, 
      { xtype: 'checkcolumn', text: 'Is My Guardian', dataIndex: 'IsMyGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true }}, 
      { xtype: 'checkcolumn', text: 'I Am Guardian', dataIndex: 'IAmGuardian', editor: { xtype: 'checkboxfield', allowBlank: true, inputValue: true } } 
     ], 
    height: 200, 
    width: 400, 
    buttons: 
     [ 
      { 
       xtype: 'button', 
       cls: 'trash-btn', 
       iconCls: 'trash-icon-large', 
       width: 64, 
       height: 64, 
       action: 'trash' 
      } 
     ] 
}); 

PersonFamilyGrid.js（存儲）

Ext.require('Client.model.PersonFamilyGrid'); 

Ext.define('Client.store.PersonFamilyGrid', 
{ 
    extend: 'Ext.data.Store', 
    autoLoad: false, 
    model: 'Client.model.PersonFamilyGrid', 
    proxy: 
     { 
      type: 'ajax', 
      url: '/Person/GetFamily', 
      reader: 
       { 
        type: 'json' 
       } 
     } 
}); 

個

PersonFamilyGrid.js（模型）

Ext.define('Client.model.PersonFamilyGrid', 
{ 
    extend: 'Ext.data.Model', 
    fields: 
     [ 
      'idFamily', 
      'idPerson', 
      'idFamilyMember', 
      'Name', 
      'Relationship', 
      'IsMyGuardian', 
      'IAmGuardian' 
     ] 
}); 

相關代碼從控制器：

.... 
.... 
var personTab = thisController.getMainTabPanel().add({ 
    xtype: 'MainTabPersonTab', 
    title: dropData.data['Title'], 
    closable: true, 
    layout: 'fit', 
    tabpanelid: dropData.data['ID'], 
    tabpaneltype: dropData.data['Type'] 
}); 

personTab.items.items[0].idPerson = dropData.data['ID']; 
personTab.items.items[1].idPerson = dropData.data['ID']; 

thisController.getMainTabPanel().setActiveTab(personTab); 
.... 
.... 

Answer 1

您將store設置爲網格原型上的屬性，並在類定義時創建一次。這意味着您從該類實例化的所有網格將共享完全相同的商店。

請注意，您還將創建一個單一的cellediting插件，該插件將與該網格的所有實例化一起共享。這絕對不行。您可能只能在實例化的第一個或最後一個網格中進行編輯。

一般來說，你應該不喜歡在類原型store，plugins，viewConfig或columns來設置屬性。相反，您應該覆蓋initComponent並將其設置在該方法內，以便網格的每個實例都獲得這些屬性的唯一副本。

Ext.define('Client.view.MainTab.PersonFamilyGrid', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.MainTabPersonFamilyGrid', 
    waitMsgTarget: true, 
    padding: '5 0 0 0', 
    title: 'My Family Members', 
    height: 200, 
    width: 400 

    initComponent: function() { 
     Ext.apply(this, { 
      // Each grid will create its own store now when it is initialized. 
      store: Ext.create('Client.store.PersonFamilyGrid'), 
      // you may need to add the plugin in the config for this 
      // grid 
      plugins: Ext.create('Ext.grid.plugin.CellEditing'), 
      viewConfig: { 
       plugins: { 
        ptype: 'gridviewdragdrop', 
        dragGroup: 'PersonFamilyGridTrash' 
       } 
      }, 
      columns: /* ... */ 
     }); 

     this.callParent(arguments); 
    } 
}); 

Answer 2

這很難說準確，但是從您所提交的代碼，似乎你不設置id參數在您的選項卡和您的商店，導致DOM碰撞id是用來使一個組件全局唯一。這在過去對組件（如選項卡和存儲）進行子分類並使用這些類的多個實例時引起了我的悲痛。

嘗試給每一個唯一的標識符（如人物ID），然後使用該ID引用它們：

var personTab = thisController.getMainTabPanel().add({ 
    id: 'cmp-person-id', 
    xtype: 'MainTabPersonTab', 
    ... 

store: Ext.create('Client.store.PersonFamilyGrid', 
{ 
    id: 'store-person-id', 
    ... 
}); 

Ext.getCmp('cmp-person-id'); 

Ext.StoreManager.lookup('store-person-id'); 

希望有所幫助。