How define differents stores for each cell combobox editor in a grid?

Question

I need to implement a grid, using extjs 4.2.1. This grid will have cellEditing plugin and in the columns I will have many textfields and comboboxes.

My problem is for a particular case. I have a column for countries (by example). Columns editor will be combobox with a store with countries. The next combobox will be cities of selected country at the same row index. When I define that store, this column will stay with the same store and I don't know this.

In row 0, I select USA and I have to load US cities in the next combo. In row 1, I select UK country and I have to load UK cities but if go back to row 0 and select US cities I want to see USA cities and not UK cities.

How I can define differentes stores for each combo cell?

Answer 1

You must define your store once like

Ext.define('MyApp.city.Store',{
   extend:'Ext.data.Store',
   //all properties which you need
});

and you should create instance of it in for city cell like

cityStore = Ext.create('MyApp.city.Store');

Answer 2

You need to setup grid with Ext.grid.plugin.CellEditing plugin which enable grid cell editing. As city column editor you will use Ext.form.field.ComboBox. When user enter editing mode on cell in city column you filter editor combobox's store. Information about selected country which you need for filtering city combobox you get from editing row record.

1. Firstly you have to setup city column editor with Ext.form.field.ComboBox instance which will be used for editing:

   var comboCities = Ext.create('Ext.form.field.ComboBox', {
       store: storeCities,
       queryMode: 'local',
       displayField: 'name',
       valueField: 'name'
   });
   

   And in grid columns definition:

   columns: [
      ...
      {
          header: 'City', 
          dataIndex: 'city', 
          editor: comboCities,                                        
       },
       ...
   ]
   

2. Secondly you have to add into your Ext.grid.plugin.CellEditing plugin configuration listener for beforeedit event. In this listener you can determine which column start editing. If editing column is the city column, you can get from editing row record information about selected country and filter comboCities store. So in filtered store there will be only cities for selected country.

   For example plugin configuration in grid configuration should be:

   {
       ...
       plugins: [
           Ext.create('Ext.grid.plugin.CellEditing', {
               clicksToEdit: 1,
               listeners: {
                   beforeedit: function(editor, e) {
                       // detrmine which column start editing
                       if (e.colIdx == 2) {
                           // get information about selected country from editin row record
                           var selectedCountry = e.record.get('country');
   
                           // filter store with cities
                           storeCities.clearFilter();
                           storeCities.filter('country', selectedCountry);
                       }
                   }
               }
           })
       ],
       ...
   }
   

Look at live fiddle with configuration example: https://fiddle.sencha.com/#fiddle/2bj