title: extjs grid combo box issue
body: <p>I am using ext js auto complete combo box with label and id values, It is perfectly showing the label in front and getting id as a value. </p>
  
  <p>But my problem is after selecting the label in combo box it immediately showing the id value instead of label value. </p>
  
  <p>I have created example grid code. Please view the code and image.</p>
  
  <p><strong>edit-grid.js</strong></p>
  
  <pre><code>/*!
   * Ext JS Library 3.2.1
   * Copyright(c) 2006-2010 Ext JS, Inc.
   * licensing@extjs.com
   * http://www.extjs.com/license
   */
  Ext.onReady(function(){
  
  
      var sm = new Ext.grid.CheckboxSelectionModel({});
  
      var lightCombo = new Ext.data.ArrayStore({
          data : [['1','Rambutan'],['2','Jackfruit'],['3','Passion Fruit'],['4','Lychee'],['5','Star fruit'],['6','Mangosteen'],['7','Kumquat'],['8','Mango'],['9','Apple'],['10','Orange']],
          fields: ['id','displayValue'],
          sortInfo: {
              field: 'displayValue',
              direction: 'ASC'
          }
      });
  
      var fightCombo = new Ext.data.ArrayStore({
          data : [['1','Bison'],['2','Bengal Tiger'],['3','Blackbuck Antelope'],['4','Black Bear'],['5','Black-footed Ferrets'],['6','Bobcat'],['7','Bull Musk Ox'],['8','Caracal'],['9','Caribou'],['10','Cheetah']],
          fields: ['id','displayValue'],
          sortInfo: {
              field: 'displayValue',
              direction: 'ASC'
          }
      });
  
      var mightCombo = new Ext.data.ArrayStore({
          data : [['1','Banyan Tree'],['2','Peepal Tree'],['3','Neem Tree'],['4','Garden Asparagus'],['5','Arjuna Tree'],['6','Aloe Vera'],['7','Tulsi Plant'],['8','Amla Plant'],['9','Ashwagandha'],['10','Brahmi']],
          fields: ['id','displayValue'],
          sortInfo: {
              field: 'displayValue',
              direction: 'ASC'
          }
      });
  
      var tightCombo = new Ext.data.ArrayStore({
          data : [['1','PHP'],['2','C#'],['3','AJAX'],['4','JavaScript'],['5','Perl'],['6','C'],['7','Ruby on Rails'],['8','Java'],['9','Python'],['10','VB.Net']],
          fields: ['id','displayValue'],
          sortInfo: {
              field: 'displayValue',
              direction: 'ASC'
          }
      });
  
      var cm = new Ext.grid.ColumnModel({
          defaults: {
              sortable: true
          },
          columns: [
              {
                  id: 'light',
                  header: 'Light',
                  dataIndex: 'light',
                  width: 130,
                  editor: new Ext.form.ComboBox({
                      store: lightCombo,
                      displayField:'displayValue',
                      valueField: 'id',
                      mode: 'local',
                      typeAhead: false,
                      triggerAction: 'all',
                      hideTrigger:false,
                      lazyRender: true,
                      emptyText: '',
                      typeAhead: false
                  })
  
              },{
                  id:'fight',
                  header: 'fight',
                  dataIndex: 'fight',
                  width: 130,
                  editor: new Ext.form.ComboBox({
                      store: fightCombo,
                      displayField:'displayValue',
                      valueField: 'id',
                      mode: 'local',
                      typeAhead: false,
                      triggerAction: 'all',
                      hideTrigger:false,
                      lazyRender: true,
                      emptyText: '',
                      typeAhead: false
                  })
  
              },{
                  id:'might',
                  header: 'might',
                  dataIndex: 'might',
                  width: 130,
                  editor: new Ext.form.ComboBox({
                      store: mightCombo,
                      displayField:'displayValue',
                      valueField: 'id',
                      mode: 'local',
                      typeAhead: false,
                      triggerAction: 'all',
                      hideTrigger:false,
                      lazyRender: true,
                      emptyText: '',
                      typeAhead: false
                  })
  
              },{
                  id:'tight',
                  header: 'tight',
                  dataIndex: 'tight',
                  width: 130,
                  editor: new Ext.form.ComboBox({
                      store: tightCombo,
                      displayField:'displayValue',
                      valueField: 'id',
                      mode: 'local',
                      typeAhead: false,
                      triggerAction: 'all',
                      hideTrigger:false,
                      lazyRender: true,
                      emptyText: '',
                      typeAhead: false
                  })
  
              }
          ]
      });
  
      var store = new Ext.data.Store({
          reader: new Ext.data.JsonReader({
              fields: [
                  {name: 'light'},
                  {name: 'fight'},
                  {name: 'might'},
                  {name: 'tight'}
              ]
          })
      });
  
      var grid = new Ext.grid.EditorGridPanel({
          store: store,
          cm: cm,
  
          renderTo: 'editor-grid',
          width: 700,
          height: 300,
          title: 'Edit Plants?',
          frame: true,
          sm: sm,
          clicksToEdit: 1
      });
      initialRowCreation();
      function initialRowCreation(){
          var Plant = grid.getStore().recordType;
  
          var p = new Plant({
              light: '',
              fight: '',
              might: '',
              tight: ''
          });
          grid.stopEditing();
          store.insert(0, p);
          grid.getView().refresh();
          grid.startEditing(0, 0);
      }
  });
  </code></pre>
  
  <p>Thanks in Advance.
  rajasekar</p>