onchange के बाद Ext जे एस बता गया मूल्य लेबल के बजाय मूल्य है

Question

बस कुछ है कि एक आसान ठीक किया जाना चाहिए से निराश हो रही है, लेकिन मैं भी आसान यह :)

को देखने के लिए मैं एक ग्रिड जहां 1 आ रही है दिमाग कर रहा हूँ कॉलम एक combobox है। यह चीज़ ठीक काम करती है और सही मूल्य मेरे AJAX अनुरोध के माध्यम से भेजा जा रहा है, लेकिन जब मैंने ग्रिड पंक्ति संपादित की, तो combobox अस्वीकृत हो गया और मूल्य जो जगह में आता है वह लेबल नहीं है, लेकिन मान।

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' 
     }) 

तो क्या होता है कि जब मैं बता गया अर्थात करने के लिए .. "थॉमस" बदलने के लिए, सेल का मान "थॉमस" के बजाय हो जाता है "5", है। मैंने सोचा कि परिभाषित मूल्य/प्रदर्शन फ़ील्ड एक फर्क पड़ता है, लेकिन ऐसा नहीं करता है।

कोई भी जो उत्तर को जानता है?

Answer 1

मुझे यकीन नहीं है कि अगर मैं आपको सही मिला तो मुझे पूरा यकीन नहीं है। यदि ऐसा है तो आपको इसके लिए एक रेंडरर की आवश्यकता होगी। मुझे लगता है कि स्नैप किए गए कोड के नीचे उदाहरण आपको दिखाएगा यदि आप इस तरह के मामले का अर्थ हैं।

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

दोनों (cellEditing + rowEditing) के लिए इस पूर्ण काम कर उदाहरण देखें JSFiddle()

यहाँ पूरा कोड

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

एचटीएमएल है

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

Answer 2

आज़माएं:

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