In an ExtJS gridpanel, how to use ChainedStore and widgetcolumn to show comboboxes with different values in each row

Question

With ExtJS 5 and 6 a chained store is a store that is a "view" of a source store. The chained store may be sorted & filtered independently without having any impact on the source store.

var mySourceStore = Ext.create('Ext.data.Store', {
    fields: ['id', 'name']
}); 

var myChainedStore = Ext.create('Ext.data.ChainedStore', {
    source: mySourceStore
});

And also gridpanels can have a column with comboboxes using the widgetcolumn.

{
    xtype: 'widgetcolumn',
    text: 'all combos',
    widget: {
        xtype         : 'combobox',
        store         : myChainedStore,
        valueField    : 'id',
        displayField  : 'name',
        forceSelection: true
    }
}

What I need is each row having another instance of the chained store. And depending on some other value in the row, the chained stored is filtered. In effect the combobox in each row may show a different set of values.

Is it a good approach to use widget columns and chained stores to accomplish this? How would such a solution look like?

PS: Just for the record, these are other approaches that I found to accomplish something similar:

• How define differents stores for each cell combobox editor in a grid?
• https://www.sencha.com/forum/showthread.php?60618-different-values-for-a-ComboBox-on-each-row-of-an-EditorGrid

Answer 1

You can create instance of store by using:

{
xtype: 'widgetcolumn',
text: 'all combos',
widget: {
    xtype         : 'combobox',
    store         : Ext.create('Ext.data.ChainedStore'),
    valueField    : 'id',
    displayField  : 'name',
    forceSelection: true
}

}