Ext JS wartość combobox po onChange jest wartość zamiast etykiety

Question

tylko sfrustrowany przez coś, co powinno być łatwo naprawić, ale jestem zbyt prosty poglądach na to :)

zobaczyć Mam siatkę gdzie 1 kolumna jest combobox. Rzecz działa dobrze, a poprawna wartość jest wysyłana za pośrednictwem mojego zapytania ajax, ale po tym, jak edytowałem wiersz siatki, combobox zniknął, a wartość, która pojawia się na miejscu, nie jest etykietą, ale wartością.

editor: new Ext.form.field.ComboBox({ 
      typeAhead: true, 
      lazyRender: true, 
      store: new Ext.data.ArrayStore({ 
       fields: ['contact', 'contactLabel'], 
       data: [ 
        [1,'Jan'], 
        [2,'Jeroen'], 
        [3,'Mattijs'], 
        [4,'Sven'], 
        [5,'Thomas'], 
        [6,'Yoran'] 
       ] 
      }), 
      valueField: 'contact', 
      displayField: 'contactLabel', 
      hiddenName: 'contact' 
     }) 

Więc co się dzieje, że przy zmianie combobox tj .. „Thomas”, wartość w komórce staje się „5”, zamiast „Thomas”. Sądziłem, że definiowanie pól wartości/wyświetlania będzie miało znaczenie, ale tak się nie dzieje.

Ktoś, kto zna odpowiedź?

Answer 1

Nie jestem do końca pewien, czy dobrze cię rozumiem. Jeśli tak, będziesz potrzebował renderera. Przypuszczam, że przykład poniżej kodu snipped powinien pokazać ci, jeśli masz na myśli taki przypadek.

// the renderer. You should define it within a namespace 
var comboBoxRenderer = function(combo) { 
    return function(value) { 
    var idx = combo.store.find(combo.valueField, value); 
    var rec = combo.store.getAt(idx); 
    return (rec === null ? '' : rec.get(combo.displayField)); 
    }; 
} 

// the edit combo 
var combo = new Ext.form.ComboBox({ 
    store: store, 
    valueField: "value", 
    displayField: "text" 
}); 

Zobacz ten pełny przykład pracy dla obu (cellEditing + rowEditing) JSFiddle()

Oto kompletny kod

Ext.create('Ext.data.Store', { 
    storeId:'simpsonsStore', 
    fields:['name', 'email', 'phone', 'id'], 
    data:{'items':[ 
     {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224","id": 0}, 
     {"name":"Bart", "email":"bart@simpsons.com", "phone":"555-222-1234","id": 1}, 
     {"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244","id": 2}, 
     {"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254","id": 3} 
    ]}, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      root: 'items' 
     } 
    } 
}); 

    // the combo store 
var store = new Ext.data.SimpleStore({ 
    fields: [ "value", "text" ], 
    data: [ 
    [ 0, "Option 0" ], 
    [ 1, "Option 1" ], 
    [ 2, "Option 2" ], 
    [ 3, "Option 3" ] 
    ] 
}); 

// the renderer. You should define it within a namespace 
var comboBoxRenderer = function(combo) { 
    return function(value) { 
    var idx = combo.store.find(combo.valueField, value); 
    var rec = combo.store.getAt(idx); 
    return (rec === null ? '' : rec.get(combo.displayField)); 
    }; 
} 

// the edit combo 
var combo = new Ext.form.ComboBox({ 
    store: store, 
    valueField: "value", 
    displayField: "text" 
}); 


// demogrid 
Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     {header: 'Name', dataIndex: 'name', editor: 'textfield'}, 
     {header: 'Email', dataIndex: 'email', flex:1, 
      editor: { 
       xtype: 'textfield', 
       allowBlank: false 
      } 
     }, 
     {header: 'Phone', dataIndex: 'phone'}, 
     {header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)} 
    ], 
    selType: 'cellmodel', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.CellEditing', { 
      clicksToEdit: 1 
     }) 
    ], 
    height: 200, 
    width: 400, 
    renderTo: 'cell' 
}); 
// demogrid 
Ext.create('Ext.grid.Panel', { 
    title: 'Simpsons', 
    store: Ext.data.StoreManager.lookup('simpsonsStore'), 
    columns: [ 
     {header: 'Name', dataIndex: 'name', editor: 'textfield'}, 
     {header: 'Email', dataIndex: 'email', flex:1, 
      editor: { 
       xtype: 'textfield', 
       allowBlank: false 
      } 
     }, 
     {header: 'Phone', dataIndex: 'phone'}, 
     {header: 'id', dataIndex: 'id', editor: combo, renderer: comboBoxRenderer(combo)} 
    ], 
    selType: 'rowmodel', 
    plugins: [ 
     Ext.create('Ext.grid.plugin.RowEditing', { 
      clicksToEdit: 1 
     }) 
    ], 
    height: 200, 
    width: 400, 
    renderTo: 'row' 
}); 

html

<div id="cell"></div> 
<div id="row"></div> 

Answer 2

Spróbuj:

data: [ 
    {contact: 1, contactLabel: 'Jan'}, 
    ... 
]