View Full Version : Combobox in header column

3 Oct 2011, 4:35 AM

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

Thanks !


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:


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


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() {
resize: function(col, width) {
combo.setWidth(width - 32);

Ext.create('Ext.grid.Panel', {
columns: [

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.

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