ExtJS chained store add records

Question

I have need two stores that have nearly the same layout and data, and I thought to use a chained store.

Into store 1, I load two dozens or so records, and bind it to some multiselect combobox:

data:[{
  name: 'Red items',
  color: 'red',
},{
  name: 'Yellow items',
  color: 'yellow'
}]

So from that combobox, you can select whether an item should be red and/or yellow.

And then I have a list of items which I filter based on a tag field. That tag field would provide me the following: All items from store 1 and furthermore

{
  name:'Items without color',
  color: false
},{
  name:'Items with any colors',
  color: true
}

(So it would not make sense to show exactly the same selection in combobox and tag field.)

I guess I would derive the latter store from the former, and then I would add two records to that store somehow. But when I try to add a record to the second store, it does also add the record to the first. And then, whenever I load new records into the first store, it's not only that the records from that store are updated in the second store, but the other records also get lost.

Can someone shed some light on the details?

Alexander Alexander · Accepted Answer · 2015-12-08T14:10:07

This just does not work; one can't add records to a ChainedStore, only hide some (using a filter) . So what does work is the following:

Make Store 2 the normal store and load into it

data:[{
  name:'Items without color',
  color: false
},{
  name:'Items with any colors',
  color: true
},{
  name: 'Red items',
  color: 'red',
},{
  name: 'Yellow items',
  color: 'yellow'
}]

and make Store 1 the chained store, using Store 2 as the source, as well as a filter that removes some items by hiding them:

filterFn:function(item) {return Ext.isBoolean(item.get("color"); }

ExtJS chained store add records

1 Answers