add combo box editor in grid header in ExtJS

Question

Can we add combo box in grid header in extjs ?

we have a special requirement here, if anybody has idea then please let me know.

Thanks Deepak

Answer 1

If you want it in the grid column header (for example to implement custom filters), look at http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/build/KitchenSink/ext-theme-neptune/#big-data-grid

Basically, you configure items in the column configuration and off you go:

Ext.define('KitchenSink.view.grid.BigData', {
    extend: 'Ext.grid.Panel',
    columns: [
        {
            xtype: 'gridcolumn',
            dataIndex: 'status',
            text: 'Item status'
            items: [
                {xtype: 'combobox'}
            ]

        }
    ]
});

Answer 2

You can use extjs tbar to implement components to grid header:

tbar: [
   { xtype: 'button', text: 'Button 1' }
]

or:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [
         { xtype: 'button', text: 'Button 1' }
    ]
}]

to implement combobox, best way is to define custom combobox component and provide alias for it, then in your grid tbar just say xtype: 'mygridcombo'

Here is a example.

Answer 3

This works for me well

 {
    text     : 'Save Energy Mode',
    dataIndex: 'fs',
    items: [{
      xtype: 'combobox',
      padding: 2,
      flex: 1
    }]
  }

or simply (if you do not need title text)

     columns: { items: [{ xtype: 'combobox'}] }

Answer 4

If you can have it in the grid panel's toolbar, then Davor's suggestion is the way to go. If you actually need it in the grid's header (e.g., like for filtering on columns), you might check out the Grid Filtering example in the Ext JS docs: http://docs.sencha.com/extjs/4.2.1/#!/example/grid-filtering/grid-filter-local.html