自定义Ext.js网格面板的标题

Question

Is there a way to customize the title of ext.js grid panel (or is there a more generic way of customizing panel title) by adding custom controls to it, and not tool buttons?

I am tring to add a search field to the title, but with current existing implementation (found in the ux/grid example) it is shown how filter can be added to the drop down menu of the grid's title, and not to the title itself, which is what I am trying to achieve..

Any clue?

Answer 1

Header is a container with hbox layout so you can add/remove items to it as to any other container. You can test it (for example) here: http://extjs.eu/apps/saki-writable-grid/ by typing

Ext.ComponentQuery.query('maingridview')[0].getHeader().add({xtype:'textfield'});

in the console. The textfield appears at the header right.

As to grid filtering, see Grid Search Plugin that can be added also to the grid header.

Answer 2

Have a look at the grid panel's header config, where you can set any configuration option of Ext.panel.Header . As it is a container, you can just specify its items there:

header: {
    title: 'Test',
    titlePosition: 0,
    items: [{
        xtype: 'textfield'
    }]
}

Also check out this fiddle .