ExtJS的5：改變單店

Question

我創建了一個tabpanel時，所有的商店都更新，圖片標題，和自定義組件的HTML。這些自定義組件使用商店，但更新單個變量（狀態）時出現錯誤，所有變量都會更改。在這裏，我顯示代碼：

SelectableButtons組分：

Ext.require('Cat3.view.fsm.data.ButtonsStore'); 

/** 
* Selectable button with image 
*/ 
Ext.define('Cat3.view.fsm.components.SelectableButtons', { 
    extend: 'Ext.view.View', 
    cls: 'selectable-buttons', 
    alias: 'widget.selectable-buttons', 
    tpl: [ 
     '<tpl for=".">', 
      '<div class="thumb-wrap button button-{status}">', 
       '<img src="resources/images/cards/{type}/{status}/{name}.png">', 
       '<img src="resources/images/icons/icon_mandatory.png" class="button-tick button-tick-{status}">', 
      '</div>', 
     '</tpl>' 
    ], 

    // Set both to false if you want single select 
    multiSelect: true, 
    simpleSelect: true, 

    trackOver: false, 
    itemSelector: 'div.thumb-wrap', 
    listeners: { 
     select: function(ths, record, eOpts) { 
      record.set('status', 'active'); 
      debugAmenaButtonStatus(this); 
     }, 
     deselect: function(ths, record, eOpts) { 
      record.set('status', 'passive'); 
     }, 
     selectionchange: function(selection) { 
      this.refresh(); 
     }, 
     containerclick: function(ths, e, eOpts) { 
      return false; // Stops the deselection of items 
     } 
    }, 
    initComponent: function() { 
     var store = Ext.create('Cat3.view.fsm.data.ButtonsStore'); 
     this.setStore(store); 
     this.callParent(arguments); 
    } 
}); 


debugAmenaButtonStatus = function(ref) { 
    ref.up().up().items.items.forEach(function(tab) { // Tab 
     console.log(tab.items.items[0].getStore().data.items[0].data.status); // Amena Button Status 
    }); 
}; 

SelectableButtonsCarousel組分（Tab平板）。它使用另一家商店，但它不涉及：

var cardsImagePath = 'resources/images/cards/'; 

var ImageModel = Ext.define('ImageModel2', { 
    extend: 'Ext.data.Model', 
    fields: [{ 
     name: 'name', 
     type: 'string' 
    }, { 
     name: 'type', 
     type: 'string' 
    }, { 
     name: 'status', 
     type: 'string' 
    }, ] 
}); 

var store = Ext.create('Ext.data.Store', { 
    model: 'ImageModel2', 
    data: [{ 
     name: 'amena', 
     type: 'operator', 
    }, { 
     name: 'movistar', 
     type: 'operator', 
    }, { 
     name: 'orange', 
     type: 'operator', 
    }, { 
     name: 'simyo', 
     type: 'operator', 
    }, { 
     name: 'yoigo', 
     type: 'operator', 
    }, { 
     name: 'vodafone', 
     type: 'operator', 
    }] 
}); 


Ext.define('Cat3.view.fsm.components.SelectableButtonsCarousel', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'basic-tabs', 
    cls: 'selectable-buttons-carousel', 
    alias: 'widget.selectable-buttons-carousel', 
    store: store, 
    resizeTabs: false, 
    defaults: { 
     bodyPadding: 10, 
     layout: 'fit' 
    }, 


    require: [ 
     'Cat3.view.fsm.components.SelectableButtons', 
     'Cat3.view.fsm.data.ButtonsStore' 
    ], 

    titleTpl: function(info) { 
     return '<img src="resources/images/cards/operator/' + info.status + '/' + info.name + '.png">'; 
    }, 

    listeners: { 
     render: function(p) { 
      var tabpanel = this; 

      this.store.data.items.forEach(function(item, index) { 
       item.data.status = index === 0 ? 'active' : 'passive'; 
       var buttons = new Cat3.view.fsm.components.SelectableButtons(); 
       tabpanel.add(Ext.create('Ext.Panel', { 
        id: 'tab-' + index, 
        title: tabpanel.titleTpl(item.data), 
        items: [ buttons ], 
        cls: item.data.status, 
        info: item.data, 
        listeners: { 
         render: function(p) { 
          console.log('render'); 
         } 
        } 
       })); 
      }); 
      tabpanel.setActiveTab(0); 
     }, 

     tabchange: function(tabPanel, newCard, oldCard, eOpts) { 
      newCard.info.status = 'active'; 
      newCard.setTitle(this.titleTpl(newCard.info)); 
      newCard.items.items[0].refresh(); 

      if (oldCard) { 
       oldCard.info.status = 'passive'; 
       oldCard.setTitle(this.titleTpl(oldCard.info)); 
      } 
     } 
    } 
}); 

SelectableButtons商店：

var ImageModel = Ext.define('ImageModel', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name', type: 'string'}, 
     {name: 'type', type: 'string'}, 
     {name: 'status', type: 'string'}, 
    ] 
}); 

Ext.define('Cat3.view.fsm.data.ButtonsStore', { 
    extend: 'Ext.data.Store', 
    model: 'ImageModel', 
    data: [ 
     {name: 'amena', type: 'operator', status: 'passive'}, 
     {name: 'movistar', type: 'operator', status: 'passive'}, 
     {name: 'orange', type: 'operator', status: 'passive'}, 
     {name: 'simyo', type: 'operator', status: 'passive'}, 
     {name: 'yoigo', type: 'operator', status: 'passive'}, 
     {name: 'vodafone', type: 'operator', status: 'passive'} 
    ], 
    listeners: { 
     datachanged: function() { 
      console.log('store data changed'); 
     } 
    } 
}); 

一切工作正常，但是當我選擇SelectableButtons（一個標籤）的按鈕，每個按鈕一樣選項卡將更改其狀態，並且只有所選的活動選項卡必須更改。任何想法爲什麼？我檢查了每個商店是分開創建的，並且每個商店都有不同的ID。

Answer 1

只是一個想法，爲了更好地猜測我需要看它的工作最好在http://fiddle.sencha.com：

如果「選擇一個選擇所有」，我的第一個想法是，所有按鈕都只有一個按鈕簡稱從所有地方。一個名稱不同的實例。

Answer 2

通知您Cat3.view.fsm.components.SelectableButtons視圖行：

initComponent: function() { 
    var store = Ext.create('Cat3.view.fsm.data.ButtonsStore'); 
    ... 
} 

你可能想將其更改爲

initComponent: function() { 
    var store = new Ext.create('Cat3.view.fsm.data.ButtonsStore'); 
    ... 
} 

這將創建一個Data Store新實例，爲你的看法。