View Full Version : Combobox in Grid: Display an array?

6 Feb 2012, 6:36 AM
Hey folks,

I've got an grid where I display an ID. I would like to make a JOIN in the backend with my SQL but I still want to be able to use my combobox in the grid:

So the problem is that the grid is display an ID (foreign key to another SQL table) and when the rowediting plugin is started, a combobox appears. That combobox has a new store (the other SQL table) and has as value it's ID and as content-field the name.

var columns_city = [
{ name: 'idregion', header: 'Region', dataIndex: 'idregion', flex: 1, sortable: true, field : {
xtype : 'combobox',
displayField: 'name',
valueField: 'id',
width: 500,
labelWidth: 130,
queryMode: 'local',
typeAhead: true,
emptyText: '',
store: store_region,
allowBlank: false
I could probably make a JOIN in the backend and display the NAME field of the Region in a row, but then I wouldn't be able to use RowEditing anymore... Any other ideas?

6 Feb 2012, 7:01 AM
All you have to do is add a custom renderer to your grid's column configuration:

var columns_city = [
{ name: 'idregion', header: 'Region', dataIndex: 'idregion', renderer: myRend
field : {
xtype : 'combobox',

The renderer function would look something like below, where it's assumed that your Combo's store delcares a storeId property so that it can be looked up by the StoreManager:

function myRend(value)
var displayLabel = '';

if (!Ext.isEmpty(value))
var record = Ext.data.StoreManager.lookup('StoreName').findRecord('id', value);
if (record) {
displayLabel = record.get('name');

return displayLabel;

6 Feb 2012, 7:13 AM
Thank you very very much! :)

I knew there must have been something like this, because otherwise why is there the possibility to implement a combobox in a grid, when you can only display data that ugly.....