PDA

View Full Version : When I place a Combobox in a Grid row it returns displayField value....



rh_it
24 Jun 2013, 11:52 PM
Hello, I can't understand how shoul'd I put a working combobox in a grid row. I did it by writing this:


},{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var empty = '<span style="color: #989898;"><i>Select something</i></span>';
if(value !== 'null' && value.length > 0){
return value;
} else {
return empty;
};
},
draggable: false,
resizable: false,
align: 'center',
dataIndex: 'myDataIndex',
hideable: false,
menuDisabled: true,
text: 'MyColumn',
editor: {
xtype: 'combobox',
id: 'comboMyColumn',
margin: '4 0 0 0',
emptyText: 'Select...',
displayField: 'description',
forceSelection: true,
queryMode: 'local',
store: 'storeMyColumn',
typeAhead: true,
valueField: 'itemID'
}
},{

the combo working fine...except after the selection, when I change the focus to make a selection from a different row, the previous combo returns the valueField and not the displayField I expect to get valued.
Did I something weird!?

Farish
25 Jun 2013, 1:02 AM
you have to change the following part in your renderer code:


if(value !== 'null' && value.length > 0){
return value;
}

to


if(value !== 'null' && value.length > 0 {
if(store.findRecord("itemID", value) != null)
return store.findRecord("itemID", value).get('description'); // get the value of description field of the selected record
else
return value; // return value (itemID) if record with matching ID not found in combo store (shouldn't normally happen)
}

rh_it
25 Jun 2013, 1:16 AM
mmmh...I tried but doesn't work...still the same.

Farish
25 Jun 2013, 1:26 AM
did you try to debug it? try with Firebug or use Google Chrome (press F12). see where its failing.

Farish
25 Jun 2013, 1:27 AM
one more thing. you have to use the combo's store in the code which i put. if you use "store" its using the grid's store which it gets from the renderer function.

rh_it
25 Jun 2013, 4:54 AM
No way... :(
, the fact is, the combo is populated dinamically each row has a different rowItemID and the combo store uses this ItemID to apply a filter dinamically. For this reason I thought the event beforequert fits perfectly with this function:


onComboMyColumnBeforeQuery: function(queryEvent, eOpts){

currentRowId = Ext.getCmp('gridMyGrid').getSelectionModel().getSelection()[0].data.rowItemID;

queryEvent.combo.getStore().getProxy().extraParams.filter=currentRowId;

queryEvent.combo.getStore().load();
}

Damn I feel like a newbie...still doesn't work...

Farish
25 Jun 2013, 4:59 AM
now i m thinking its not clear to me what you want to achieve. What i thought was that when you choose a value from the combobox and click Update or end editing mode, then it displays the valueField value of that record and not the displayField value. Is this what you want to do or is it something else?

rh_it
25 Jun 2013, 5:07 AM
exactly It's right, the problems still that It shows me the valueField, but I need the displayField! I dunno what think to fix it. I thought that retrieve dinamically the combo's values annoying something because after the selection the data fields are misaligned...

rh_it
25 Jun 2013, 5:13 AM
how can I refresh the grid after I make the selection from the combo? I'll try out with this work-around

Farish
25 Jun 2013, 5:25 AM
i would recommend that you load the combo's store in advance (before the user starts editing the grid) and then use queryMode: 'local' in your combo config. This will make the combo not to load each time the user opens it. This might be a reason why its not working, otherwise the trick with the renderer should work and display the displayField value.

slemmon
26 Jun 2013, 12:56 PM
Out of the box I'd think you'd need to have your valueField match up with your column's dataIndex. Though I perhaps don't understand your use case 100%, yet. Feel free to modify my test case below to better match your use case if needed:



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


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
}
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var empty = '<span style="color: #989898;"><i>Select something</i></span>';
if(value !== 'null' && value.length > 0){
return value;
} else {
return empty;
};
},
draggable: false,
resizable: false,
align: 'center',
dataIndex: 'phone',
hideable: false,
menuDisabled: true,
text: 'MyColumn',
editor: {
xtype: 'combobox',
id: 'comboMyColumn',
//margin: '4 0 0 0',
emptyText: 'Select...',
displayField: 'description',
forceSelection: true,
queryMode: 'local',
store: Ext.create('Ext.data.Store', {
//fields: ['description', 'itemId'],
fields: ['description', 'phone'],
data: [{
description: 'Description 1',
//itemId: '1'
phone: '1'
}, {
description: 'Description 2',
//itemId: '2'
phone: '2'
}]
}),
typeAhead: true,
//valueField: 'itemID'
valueField: 'phone'
}
}
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

glopes
26 Jun 2013, 9:32 PM
I've fixed that adding a renderer to my combobox with the following code:



var v = '';
Ext.getStore('myStore').findBy(function(record) {
if (record.get('myValueField') == value) {
v = record.get('myDisplayField');
return true; // findby
}
});
return v;