PDA

View Full Version : HELP: grid combo on blur set valueField



johnstontrav
7 Sep 2010, 4:09 PM
Hi,

Using: Ext 3.2.1

I have a grid combo editor that load remote JSON data. All works fine except after selection of combo is displays the id field.

1. Combo loads fine
--------------------------------------
22271


2. Make selection
--------------------------------------
22272


3. onBlur the displayField is gone and replace with valueField
--------------------------------------
22270

Here is my code:



var myCombo = new Ext.form.ComboBox({
fieldLabel : 'myComboBox'
,hiddenName : 'combo_id'
,valueField : 'id'
,displayField : 'descr'
,forceSelection : true
,triggerAction : 'all'
,mode : 'remote'
,store : new Ext.data.JsonStore({
id : 'id'
,root : 'rows'
,fields : [
{name:'id', type:'int'}
,{name:'descr', type:'string'}
]
,url : 'combo.php'
})
});


var grid = new Ext.grid.EditorGridPanel({
...
,columns: [
...
{header: 'Combo Name' ,editor: myCombo, dataIndex: 'combo_descr'}
...
]
..
});
What am I doing wrong?

Condor
8 Sep 2010, 12:06 AM
You not only need a column editor, you also need a column renderer that displays the description for an id.

johnstontrav
8 Sep 2010, 2:53 AM
You not only need a column editor, you also need a column renderer that displays the description for an id.

Thanks for the hint Condor. I found this blog post that may be what im looking for (not at work atm, so can't test it), but is this what you mean? Do you of any other documentation/examples that explains this concept?


http://www.fusioncube.net/index.php/sencha-extjs-combobox-selectedvalue-equivalent-for-datagrid


function CodeRenderer(val){
var matching = ItemCodesStore.queryBy(
function(rec,id){
return rec.item_id == val;
});
return (matching.items[0]) ? matching.items[0].data.item_code : '';
};

// Snippet from ColumnModel of DataGrid
header: 'Code',
dataIndex: 'existingCode',
width: 70,
renderer: CodeRenderer,
editor: new Ext.form.ComboBox({
mode: 'local',
displayField: 'item_code',
valueField: 'item_id',
store: ItemCodesStore
})

Condor
8 Sep 2010, 2:56 AM
This solution (http://www.sencha.com/forum/showthread.php?67488-3.x-Ext.grid.ComboColumn-amp-Ext.util.Format.comboRenderer) is better, but just like your own example, only works on a mode:'local' combobox.