title: ExtJS Filtering Combobox Store
body: <p>I have the following Combobox declared:</p>
  
  <pre><code>{
     xtype: 'combobox',
     id:'sizeSelect',
     store: new Ext.data.SimpleStore({
         fields: [
                     {name: 'typeChoosen', type: 'string'},
                     {name: 'sizeValue',  type: 'string'}
         ],
         data: [
             ['DECIMAL','(9.2)'],
             ['DECIMAL','(9.4)'],
             ['DECIMAL','(19.2)'],
             ['DECIMAL','(19.4)'],
             ['DECIMAL','(28.2)'],
             ['DECIMAL','(28.4)'],
             ['DECIMAL','(38.2)'],
             ['DECIMAL','(38.4)'],
             ['TEXT','250'],
             ['TEXT','500'],
             ['TEXT','1000'],
             ['TEXT','2000'],
             ['TEXT','4000'],
             ['INTEGER','dafault']
          ]
      })
  }
  </code></pre>
  
  <p>I use it in a panel with a grid, for the column "size":</p>
  
  <p><a href="https://i.stack.imgur.com/Lnyza.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lnyza.png" alt="enter image description here"></a></p>
  
  <p>I want the combobox in column 'size' to be updated based on the previous cell value, with the corresponding values for each type. </p>
  
  <p>In the grid panel I have the following listener that I use for the filtering:</p>
  
  <pre><code>listeners : {
  beforeitemdblclick : function( eventThis,  record,  item, index, e, eOpts,objA ){
  
      var stateCombo = Ext.getCmp('sizeSelect');
      var currentTypeChoosen = record.raw[1]
      stateCombo.store.each(function(storeItem){
              if(storeItem.data.typeChoosen == currentTypeChoosen){ 
                  stateCombo.store.filter("typeChoosen",currentTypeChoosen);
              }                                           
      }); 
  }
  </code></pre>
  
  <p>It seems to compare it right, but it returns an object in the combobox instead of just the values. I'm pretty new to ExtJS and I really can't think of a way to make it work as I want to. </p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This is my working code:</p>
  
  <pre><code>{
  xtype: 'combobox',
  id:'sizeSelect',
  editable:false,
  valueField: 'typeValue',
  displayField: 'typeValue',
  mode:'local',
  lastQuery: '',
  allowBlank: false,
  listeners:{
  },
  store: new Ext.data.SimpleStore({
      fields: ['size', 'typeValue'],
      data: [
              ['DECIMAL', '(9,2)'],
              ['DECIMAL', '(9,4)'],
              ['DECIMAL', '(19,2)'],
              ['DECIMAL', '(19,4)'],
              ['DECIMAL', '(28,2)'],
              ['DECIMAL', '(28,4)'],
              ['DECIMAL', '(38,2)'],
              ['DECIMAL', '(38,4)'],
              ['TEXT', '250'],
              ['TEXT', '500'],
              ['TEXT', '1000'],
              ['TEXT', '2000'],
              ['TEXT', '4000']
          ]
  })
  }
  
  var panel3 = Ext.create('Ext.panel.Panel', { 
      id:'step3',
      border:0,
      xtype: 'panel', 
      anchor:'100% 100%',
      hideMode:'display',
      bodyStyle:"overflow-y:scroll !important;",
      hidden:true,
      autoHeight:true,
      items: [{
          xtype: 'grid',
          id:'tableTypeGrid',
          border: false,                      
          plugins: [
              Ext.create('Ext.grid.plugin.CellEditing', {
                  clicksToEdit: 2
              })
          ],
          listeners : {
              beforeitemdblclick : function( eventThis,  record,  item, index, e, eOpts ){
                  var stateSizeCombo = Ext.getCmp('sizeSelect');
                  var sizeColumnStore = stateSizeCombo.getStore();
                  var prevCellValue = record.data.type;
                  sizeColumnStore.clearFilter();
                  sizeColumnStore.filter('size', prevCellValue); //
                  }
              },
              ...
  </code></pre>
  
  <p>The properties of the combobox turned out to be very important :) </p>