ExtJS 6 toggle legend fields

Question

Now legend in EXTJS works in such way: it shows all available legend fields and appropriate series and you can enable/disable any of them. I want to make that only one legend item can be enabled in one time. E.g. you have chart with 2 legend items (with 2 series), only first item is active on chart load and then if you want to active second item then first item becomes automatically disabled.

Here is chart fiddle with native ExtJS behaviour: https://fiddle.sencha.com/#fiddle/1b7d Please, post ideas how can I make it work as I described before.

Answer 1

If you have a look at the legend source code, freely available in your Ext directory or in the Sencha docs, you find that you can override that toggleItem method in such a way that only one selection is allowed.

The basics should be something like

  toggleItem: function (index) {
    var store = this.getStore(),
        record = store.getAt(index);
    store.query("disabled", false).each(function(record) {record.set("disabled", true) });
    record.set("disabled", false);
  }

but it doesn't work exactly as expected. Perhaps you can pave your way along from there.

Answer 2

this can be easily achieved with using legend type dom, and looping and setting every other legend (button) disabled, as followed -

legend: {
      docked: 'bottom',
      type: 'dom',
      listeners: {
        itemclick: function(obj, record, item, index) {
            var i = 0,
                records = obj.getStore().getRange();
            for(i=0; i < records.length; i++){
                i === index ? records[i].set('disabled', false) : records[i].set('disabled', true);
            }
        }
    }
}