如何在ExtJs中的渲染网格中的标题下添加面板

Question

假设我有这个网格：

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

如何在原始标题下添加另一个标题，面板或我们称之为的内容：

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

这样它的下方和上方的列将是独立的，并且将占据100％的宽度？

Answer 1

可以通过在网格中的afterrender侦听器中修改标记来实现：

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

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

以下是工作示例：http://jsfiddle.net/nUjmx/ 你只需要设计风格。

Answer 2

将Panel添加为停靠：“top”dockedItem，具有较高的权重配置（重量级项目倾向于面板的中心）

因此，此面板将停靠在标题下方。