自定义 Extjs 网格面板标题

【问题标题】：Customizing Ext.js grid panel's title自定义 Extjs 网格面板标题
【发布时间】：2014-07-11 04:39:12
【问题描述】：

有没有办法通过添加自定义控件而不是工具按钮来自定义 ext.js 网格面板的标题（或者是否有更通用的自定义面板标题的方法）？

我想在标题中添加一个搜索字段，但使用当前现有的实现（在 ux/grid 示例中找到）显示了如何将过滤器添加到 下拉菜单网格的标题，而不是 title 本身，这是我想要实现的..

有什么线索吗？

【问题讨论】：

【解决方案1】：

查看网格面板的header 配置，您可以在其中设置Ext.panel.Header 的任何配置选项。因为它是一个容器，你可以在那里指定它的items：

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

还可以查看fiddle。

【讨论】：

【解决方案2】：

Header 是一个具有hbox 布局的容器，因此您可以像添加/删除任何其他容器一样向其中添加/删除项目。你可以在这里测试它（例如）：http://extjs.eu/apps/saki-writable-grid/ 输入

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

在控制台中。文本字段出现在标题右侧。

关于网格过滤，参见Grid Search Plugin，也可以添加到网格标题中。

【讨论】：