PDA

View Full Version : Combobox in header column



aiso
3 Oct 2011, 4:35 AM
Hi,

I would know if it's possible to put a combobox in a header column of grid.Panel, and how to do that ?

Thanks !

Aiso

skirtle
3 Oct 2011, 11:21 AM
It isn't clear exactly what you want to do, there are a number of different ways to interpret the requirement of putting a combobox in a grid header. What I've attempted is the following:

28486

One way would be to use a UX I wrote called CTemplate:

http://www.sencha.com/forum/showthread.php?148066

I had a go and managed to get a combobox in the header like this:


var combo = Ext.create('Ext.form.field.ComboBox' ,{
editable: false, // Editing doesn't work properly so set to false
store: ['Red', 'Green', 'Blue'],
toString: function() {
return 'Name'; // This value will be shown in the column menu
}
});

var column = Ext.create('Ext.grid.column.Column', {
dataIndex: 'name',
header: combo,
renderTpl: Ext.create('Skirtle.CTemplate', Ext.grid.column.Column.prototype.renderTpl),
sortable: false, // Otherwise clicking the combobox kicks off sorting
listeners: {
destroy: function() {
combo.destroy();
},
resize: function(col, width) {
combo.setWidth(width - 32);
}
}
});

Ext.create('Ext.grid.Panel', {
...
columns: [
column,
...
]
});

It is very limited though. The example I've given should work fine but I ran into various problems if I tried to deviate much from the settings used here.

aiso
3 Oct 2011, 10:39 PM
It's exactly what I tried to do. Thank you very much !