extjs 6 grid custom header

Question

In my ExtJs 6 app I have a grid in which I need to create a custom header. The header, including the column, should have below the columns an extra pair of rows that should be expandable (toggle on/toggle off)

Is there a mechanism in extjs 6 by which I can achieve this?

Alexander Alexander · Accepted Answer · 2016-05-24T16:01:55

You can make a multi-line header by nesting multiple columns:

columns:[{
    text:'Top header',
    columns:[{
        text:'Middle header',
        columns:[{
            text:'Inner header'
        }]

Any of these headers you can modify by deriving from an existing Ext.grid.column.Column. The renderTpl property of the overridden class can take a custom XTemplate. Not sure what exactly you mean with "expandable", but whatever it is, a well-crafted XTemplate will be able to handle it.

extjs 6 grid custom header

1 Answers