EXTJS 5.1 WIDGET IN GRID COLUMN HEADER

Is it possible to insert custom widget (for example button or checkbox) in gridpanel column header?

From documentation it's unclear. Already I've tried to google it, but without any success.

Please help!

Upvotes: 0

Views: 719

Answers (2)

connyr
connyr

Reputation: 1

I had the same problem: How to get a button (or any custom component) into the extjs grid header field.

After some research I found the solution for extjs 5: You can configure the "items" property of the grid columns:

{
    xtype: "gridcolumn",
    text: "column header name in grid",
    dataIndex: "...",
    items:[
       {
           xtype: "button",
           text: "Foo",
           handler: "onFooClick"
       }
    ]
}

This will for example show a button under the grid header text inside the header component.

Upvotes: 0

Dreculah
Dreculah

Reputation: 96

The short answer is 'yes'.

You can extend the grid column, then make an afterrender listener.

In the listener, get the column's innerEl = (component.getEl().down('column-header-inner').

Then, make a new component like button/checkbox, columnComponent.headerButton = new Ext.button.Button()

Then, render it columnComponent.headerButton.render(innerEl).

I hope this helps.

Upvotes: 1

Related Questions