extjs网格组合框问题

Question

我使用带标签和id值的ext js自动完成组合框，它完美地显示前面的标签并获取id作为值。

但我的问题是在组合框中选择标签后立即显示id值而不是标签值。

我已经创建了示例网格代码。请查看代码和图像。

编辑grid.js

/*! 
* 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); 
    } 
}); 

在此先感谢。 rajasekar

Answer 1

发生问题的原因是您在网格中显示值。您需要为该列使用记录中的正确字段创建渲染器。

http://dev.sencha.com/deploy/ext-3.3.1/docs/?class=Ext.form.ComboBox

查找的部分，说ComboBox in Grid

If using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active. Set up the renderer manually, or implement a reusable render, for example:

Ext.util.Format.comboRenderer = function(combo){ 
    return function(value){ 
     var record = combo.findRecord(combo.valueField, value); 
     return record ? record.get(combo.displayField) : combo.valueNotFoundText; 
    } 
} 

你的代码也从很多额外的逗号的痛苦在属性列表的末尾。这甚至不会在IE中解析，我将它们从您发布的代码中移除。