title: extjs4.0 Row grid editor multi select combo showing the keys instead of values when non selected
body: <p>![ I am using extjs 4 . and using RowEditing plug, added multi selection combo box , The combo box is showing the keys instead of the values , But when I select any row it is showing the values , After that when I do some changes to the data in any gievn row, Then the values start showing  .</p>
  
  <p>Also I could not see the checkbox when the row is not selected and showing the checkbox when it is selected . </p>
  
  <p>Code </p>
  
  <p>Model is :</p>
  
  <pre><code>Ext.define('Employee', {
  extend: 'Ext.data.Model',
  idProperty:'employeeId',
  fields: [
          {name: 'alertType', type: 'string'},
          {name: 'statusCode', type: 'bool'},
          {name: 'employeeId', type: 'string'},
          {name: 'employeeName', type: 'string'},
          {name: 'jobCode', type: 'string'},
          {name: 'jobTitle', type: 'string'},
          {name: 'jobTarget', type: 'string'},
          {name: 'vpPlan', type: 'string'},
          {name: 'losPlanName', type: 'string', convert:function(v, record){if(typeof v =="string") return v.split(",");  else return v; }},
          {name: 'losPlanCodes', type: 'float[]', convert:function(v, record){if(typeof v =="string") return v.split(",");  else return v; }},
          {name: 'losLocation', type: 'string', convert:function(v, record){if(typeof v =="string") return v.split(",");  else return v; }},
          {name: 'losLocationCodes', type: 'float[]', convert:function(v, record){if(typeof v =="string") return v.split(",");  else return v; }},
          {name: 'entity', type: 'string'},
          {name: 'locationCode', type: 'string'},
          {name: 'deptId', type: 'string'},
          {name: 'deptName', type: 'string'},
      ]
  </code></pre>
  
  <p>}); </p>
  
  <p>Grid Store :- </p>
  
  <pre><code>var directReportiesStore = Ext.create('Ext.data.Store', {
      autoDestroy: true,
      autoLoad:true,
      autoSync: true,
      allowSingle: true,
      storeId: 'directReportiesStore',
      model: 'Employee',
      sorters: [{
          property: 'employeeName',
          direction:'ASC'
      }],
      proxy: {    
          type: 'ajax',
          url: 'getDirectReportiesJson.do?plannerId='+plannerId,
          api: {
              update: 'getDirectReportiesJson.do?plannerId='+plannerId,
          },
          reader: {
              type: 'json',
              successProperty: 'success',
              idProperty: 'employeeId',
              root: 'data',
              messageProperty: 'message'
          },
          writer: {
              type: 'json',
              writeAllFields: false
          },
          listeners: {
              exception: function(proxy, response, operation){
                  Ext.MessageBox.show({
                      title: 'REMOTE EXCEPTION',
                      msg: operation.getError(),
                      icon: Ext.MessageBox.ERROR,
                      buttons: Ext.Msg.OK
                  });
              }
          }
      },
      listeners: {
          write: function(proxy, operation){
              Ext.example.msg(operation.action, operation.resultSet.message);
          }
      },
      listeners: {
          load: function(store,records){
                  for(var rec=0; rec&lt; records.length; rec++){
                      for(var i=0; i&lt; Ext.getCmp('employeeGrid').columns.length; i++){
                          if(Ext.getCmp('employeeGrid').columns[i].getId() =='losLocationCodes'){
                              alert(Ext.getCmp('employeeGrid').columns[i].getId())
                              Ext.getCmp('employeeGrid').columns[i].getEditor().setValue(records[rec].get('losLocationCodes'))
                              alert(records[rec].get('losLocationCodes'));
                          }
                      }
                  }
          }
      }
  });
  </code></pre>
  
  <p>![][1]</p>
  
  <p>Combo Box stores : </p>
  
  <pre><code>// create the Plan Store
  var planStore = Ext.create('Ext.data.Store', {
      autoDestroy: true,
      storeId: 'planStore',
      idIndex: 0,
      fields: [
          {name: 'planId', type: 'float'},
          {name: 'planName', type: 'string'},
          {name: 'planTypeName', type: 'string'},
     ]
  });
  
  planStore.loadData(plansJson);
  
  
  // create the Location Store
  var locationStore = Ext.create('Ext.data.Store', {
      autoDestroy: true,
      storeId: 'locationStore',
      idIndex: 0,
      fields: [
          {name: 'locAreaId', type: 'float'},
          {name: 'locAreaName', type: 'string'},
          {name: 'active', type: 'string'},
          {name: 'inclRegAvg', type: 'string'},
     ]
  });
  
  locationStore.loadData(locationJson);
  </code></pre>
  
  <p>GRID using all three stores ...</p>
  
  <pre><code>var grid = Ext.create('Ext.grid.Panel', {
      store: directReportiesStore,
      id:'employeeGrid',
      title: 'Employee Varieable Pay Mapping',
      width: 1100,
      height: 400,
      frame: true,
      columns: [{
          id: 'alertType',
          header: 'Alert',
          width: 30,
          dataIndex: 'alertType',
          editor: {
              disabled: true
          }
      } , {
          id: 'statusCode',
          header: 'Reviewed?',
          dataIndex: 'statusCode',
          width: 40,
          editor: {
              xtype: 'checkbox',
              cls: 'x-grid-checkheader-editor'
          }
      } , {
          id: 'employeeId',
          header: 'Employee Id',
          dataIndex: 'employeeId',
          width: 50,
          editor: {
              disabled: true
          }
      } ,{
          id: 'employeeName',
          header: 'Employee Name',
          dataIndex: 'employeeName',
          flex: 1,
          editor: {
              disabled: true
          }
      } ,{
          id: 'jobCode',
          header: 'Job Code',
          dataIndex: 'jobCode',
          width: 40,
          editor: {
              disabled: true
          }
      } ,{
          id: 'jobTitle',
          header: 'Job Title',
          dataIndex: 'jobTitle',
          flex: 1,
          editor: {
              disabled: true
          }
      } ,{
          id: 'jobTarget',
          header: 'Job Target',
          dataIndex: 'jobTarget',
          width: 40,
          editor: {
              disabled: true
          }
      } , {
          id:'vpPlan',
          header: 'VP Plan',
          dataIndex: 'vpPlan',
          width: 70,
          editor: {
              xtype: 'combobox',
              typeAhead: true,
              editable: false,
              triggerAction: 'all',
              selectOnTab: true,
              store: [
                  ['SCAL','SCAL'],
                  ['Shared Svc','Shared Svc'],
              ],
              lazyRender: true,
              listClass: 'x-combo-list-small'
          }
      }, {
          id:'losPlanCodes',
          header: 'LOS Plan Name',
          dataIndex: 'losPlanCodes',
          width: 250,
          editor: {
              xtype: 'combobox',
              typeAhead: true,
              triggerAction: 'all',
              tooltip: 'losPlanName',
              selectOnTab: true,
              store: planStore,
              queryMode: 'local',
              lazyRender: true,
              multiSelect: true,
              displayField: 'planName',
              valueField:'planId'
          }
      }, {
          id:'losLocationCodes',
          header: 'LOS Location',
          dataIndex: 'losLocationCodes',
          width: 90,
          editor: {
              xtype: 'combobox',
              typeAhead: true,
              triggerAction: 'all',
              selectOnTab: true,
              autoSelect: true,
              store: locationStore,
              queryMode: 'local',
              multiSelect: true,  
              lazyRender: true,
              valueField:'locAreaId',
              displayField: 'locAreaName',
              listClass: 'x-combo-list-small'
              //value: 'losLocationCodes',
              //data : 'losLocationCodes',
              /*
              listeners : {
                  'beforeselect' : function(combo, record,index){
                  },
                  'change': function(combo, newValue, oldValue){
                  },
                  'afterrender': function(combo, record1) {
                  }
              }
          */
          }
      },{
          id: 'Entity',
          header: 'entity',   
          dataIndex: 'entity',
          width: 30,
          editor: {
              disabled: true
          }
      } , {
          id: 'locationCode',
          header: 'Location Code',
          dataIndex: 'locationCode',
          width: 50,
          editor: {
              disabled: true
          }
      } ,{
          id: 'deptId',
          header: 'Dept Code',
          dataIndex: 'deptId',
          width: 50,
          editor: {
              disabled: true
          }
      } ,{
          id: 'deptName',
          header: 'Dept Name',
          dataIndex: 'deptName',
          flex: 1,
          editor: {
              disabled: true
          }
      }],
      selModel: {
          selType: 'cellmodel'
          //selType: 'checkboxmodel'
      },
      renderTo: 'editor-grid',
      tbar: [{
          text: 'Select All'
      }],
      plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToMoveEditor: 1,
            pluginId: 'employeeEditing',
            autoCancel: false,    
            listeners: {
            'beforeedit': function(editor, e, eOpts) {
  
           //  alert(editor.rowIdx)
           //    alert(editor.field)
           //   alert(editor.value)
  
              if (editor.record.get('entity') == 2 || editor.record.get('entity') == 02){
                     grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').disable();
                     grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').disable();
              } else if (editor.record.get('entity') == 8 || editor.record.get('entity') == 08){
                      grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').disable();                        
              }
              /*
                  var me = this;
                  this.isEditAllowed = false;
                  this.cancelEdit();
                      Ext.MessageBox.show({
                      title: 'Not Allowed to Edit',
                      msg: 'Not Allowed to Edit this record with entity'+ this.entity,
                      icon: Ext.MessageBox.INFO,
                      buttons: Ext.Msg.OK
                  });
              return true;
              */
            },
           'cancelEdit': function(editor) {
                  grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();
                  grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').enable();
            },
            'validateedit': function(e) {
  
            },
            'edit': function(editor) {
                  if (editor.record.get('entity') == 2 || editor.record.get('entity') == 02){
                             grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();
                             grid.getPlugin('employeeEditing').editor.form.findField('losLocationCodes').enable();
                          }
                  else if (editor.record.get('entity') == 8 || editor.record.get('entity') == 08){
                          grid.getPlugin('employeeEditing').editor.form.findField('losPlanCodes').enable();                        
                  }
           }
          }
        })
    ],
    listeners: {
            'render': function(grid) {
            }
        }
  });
  grid.getSelectionModel().on('selectionchange', this.onSelectChange, this);
  </code></pre>
  
  <p>Please help </p>
  
  <p>][1]</p>