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 Store：

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看到它最佳：

如果＆＃34;选择一个选择全部＆＃34;，我的第一个想法是所有按钮只是从所有地方引用的一个按钮。一个名称不同的实例。

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的新实例。

ExtJS 5：更改单个商店时更新所有商店

2 个答案: