How to add panel under header in a rendered grid in ExtJs

Question

Let's say I have this grid:

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/group-header-grid.html

How can I add another header,panel or whatever we call it under the original headers :

http://img851.imageshack.us/img851/3537/panelnu.png

so that it would be indepentend of the columns beneath and over it and will take 100% width ?

Krzysztof Krzysztof · Accepted Answer · 2012-01-06T12:38:55

It's possible by modifying markup in afterrender listener in grid:

afterrender: function() {
    var view = this.getView();
    var el = view.getHeaderCt().getEl();

    var div = document.createElement('div');
    div.innerHTML = 'Header';
    el.dom.appendChild(div);
}

Here is working sample: http://jsfiddle.net/nUjmx/ You need only to style it.

How to add panel under header in a rendered grid in ExtJs

2 Answers