extjs grid combo box issue

Question

J'utilise ext js auto complete combo box avec des valeurs d'étiquette et d'id, Il montre parfaitement l'étiquette en face et obtient l'identifiant comme valeur.

Mais mon problème est après avoir sélectionné l'étiquette dans la zone de liste déroulante, il montre immédiatement la valeur de l'id au lieu de la valeur de l'étiquette.

J'ai créé un exemple de code de grille. S'il vous plaît voir le code et l'image.

modifier-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); 
    } 
}); 

Merci à l'avance. rajasekar

Answer 1

Votre problème se produit parce que vous affichez la valeur dans une grille. Vous devez créer un moteur de rendu pour cette colonne qui utilise le champ correct de l'enregistrement.

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

Recherchez la section qui dit 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; 
    } 
} 

Votre code a également été la souffrance de beaucoup de virgules supplémentaires à la fin des listes de propriété. Cela ne sera même pas analyser dans IE, je les ai retirés du code que vous avez posté.