隐藏 ExtJS 网格列标题答案

【问题标题】：Hiding ExtJS Grid Column header隐藏 ExtJS 网格列标题
【发布时间】：2011-01-01 22:54:06
【问题描述】：

我知道我可以使用代码隐藏网格列标题。

#gridid .x-grid3-hd-row { display:none; }

但我不想使用任何 CSS 更改。如何使用 JavaScript 做同样的事情？

【问题讨论】：

【解决方案1】：

您可以通过以下方式轻松地将其添加到 Ext.grid.GridPanel 中：

hideHeaders: true

【讨论】：

【解决方案2】：

您可以将hideHeaders configuration option of the GridPanel 设置为true。或者你的意思是在网格渲染之后？

已编辑：如果您想更改（或禁用）标头的创建方式，您还可以从 GridView 覆盖 renderHeaders 或 updateHeaders。另一种方法可能是将templates 选项传递给GridView，并将header 值设置为空模板而不是默认值：

ts.header = new Ext.Template(
    '',
    '{cells}',
    '
'
);

虽然默认实现将标头写入this.innerHd，并且innerHd被定义为this.mainHd.dom.firstChild，如果hideHeaders选项被设置，this.mainHd被设置为隐藏。所以我希望该选项也会影响列标题。

已编辑：我们谈论的是哪个版本的 ExtJS？我看了the current source，我猜是3.1。

【讨论】：

【解决方案3】：

只需将hideHeaders: true 添加到您的网格中。它应该工作

【讨论】：

【解决方案4】：

您可以将其添加到您的网格定义中：

listeners: {
    render: function(grid) {
        grid.getView().el.select('.x-grid3-header').setStyle('display', 'none');
    }
},

【讨论】：

【解决方案5】：

通常，当您将网格放入面板时，您最终会想要这个。

对我来说，css hack 似乎很糟糕，只有这样才有效：

preventHeaders: true

【讨论】：