Extjs 5.1图表图例

Question

I'm using Ext JS 5.1.

I have a very simple problem:
I have a pie chart, and a button. When I click on the button, I bind a new store to my chart. This works fine. But, if I make one element invisible in my chart (by clicking on one item in the legend) and bind a new store, the item at the same index of the new store will also be invisible. I don't want that. Is there any way to set everything visible for a chart ?

Here is the Sencha Fiddle to clearly explain my problem.

And the code if you're lazy!

Store A

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "A-0", "value": 18.34},
        {"name": "A-1", "value": 2.67},
        {"name": "A-2", "value": 1.90}
    ]
});

Store B

var storeB = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "B-0", "value": 4.34},
        {"name": "B-1", "value": 54.67},
        {"name": "B-2", "value": 18.90}
    ]
});

Polar chart

var donut = Ext.create('Ext.chart.PolarChart', {
    title: 'Test',
    animation: true,
    width: 300,
    height: 300,
    renderTo: Ext.getBody(),

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

Button - Swap stores

var button = Ext.create('Ext.Button', {
    text: 'Click to change the pie store',
    renderTo: Ext.getBody(),
    margin: '10 10 10 63',
    handler: function() {
        if (donut.getStore() == storeA) {
            donut.bindStore(storeB);
        }
        else {
            donut.bindStore(storeA);
        }
    }
});


Ext.create('Ext.form.Label', {
    html: '<br/><br/>To produce the bug:<br/><br/>' +
          '1 - Make one item invisible by clicking on an item in the legend (A-0 for example).<br/>' +
          '2 - Change the pie store by clicking on the blue button.<br/>' +
          '3 - See with the new store the item at the same index is invisible. I don\'t want that to happen.<br/><br/>' +
          'Is it possible to "enable" (make visible) every items of a pie chart?',
    width: 300,
    height: 300,
    renderTo: Ext.getBody()
});

Answer 1

I took your suggested answer and created a complete example. See the Sencha Fiddle for a live demo or refer to the code below.

var storeA = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "A-0", "value": 18.34},
        {"name": "A-1", "value": 2.67},
        {"name": "A-2", "value": 1.90}
    ]
});

var storeB = Ext.create('Ext.data.Store', {
    fields: ['name', 'value'],
    data: [
        {"name": "B-0", "value": 4.34},
        {"name": "B-1", "value": 54.67},
        {"name": "B-2", "value": 18.90}
    ]
});

var donut = Ext.create('Ext.chart.PolarChart', {
    animation: true,
    width: 300,
    height: 300,

    store: storeA,

    legend: {
        docked: 'bottom'
    },

    series: [{
        type: 'pie',
        angleField: 'value',
        lengthField: 'length',
        colors: ["#9aff4f", "#35b4e3", "#ffb400"],
        donut: 20,
        label: {
            field: 'name',
            display: 'inside'
        },
        highlight: true
    }]
});

Ext.create('Ext.panel.Panel', {
    title : 'Chart Example: Swap Stores',
    renderTo: Ext.getBody(),
    layout: {
        type  : 'vbox',
        pack  : 'center',
        align : 'middle'
    },
    defaults : {
        margin : '8 0',
    },
    items: [donut, {
        xtype: 'label',
        html: 'Is it possible to "disable" (make invisible) items that have no name or 0 as value?<br/>' + 'For example after A-1, I have an "empty" record in my store, but I don\'t want it to be displayed ;)'
    }, {
        xtype: 'button',
        text: 'Click to change the pie store',
        handler: function() {
            if (donut.getStore() == storeA) {
                donut.bindStore(storeB);
            } else {
                donut.bindStore(storeA);
            }

            for (var i = 0; i < donut.legendStore.getCount(); i++) {
                donut.legendStore.getAt(i).set('disabled', false);
            }
        }
    }]
})