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新实例，为你的看法。