ExtJS 3 - 始终在 GridPanel 列标题中显示菜单图标？

Posted 2023-02-26

【中文标题】ExtJS 3 - 始终在 GridPanel 列标题中显示菜单图标？

【英文标题】：ExtJS 3 -- Always Show menu icon in GridPanel Column Header?

【发布时间】：2011-10-26 15:23:21

【问题描述】：

我需要始终在 GridPanel 的列标题中显示菜单图标。见附图。我追踪了css类，看到<td />标签在悬停时被分配了x-grid3-hd-btn。 x-grid3-hd-btn 类使用背景图像 grid3-hd-btn.gif 来显示我想要的下拉箭头，但我对 css 的了解不够，无法弄清楚如何始终显示它。

GridPanel 类 api 中似乎没有一个钩子来始终显示这个，希望有。另外，请注意，我只希望显示箭头图标，不希望列标题更改颜色等。

有人对此有任何指导吗？

谢谢！

约翰

【参考方案1】：

将此添加到您的样式表中，这会覆盖默认的 extjs 主题样式

/**
 * EXTJS Grid-3 Always visible header buttons
 */

.x-grid3-hd-btn 
display: block !important;
height: 22px !important;


.x-grid3-hd 
cursor: pointer;

【讨论】：

这工作正常，但菜单显示为 menuDisabled:true 的列。如何克服这个问题？

【参考方案2】：

您是否尝试过替换 ext-all.css 文件中的 css 类背景图片？

原文：

.x-grid3-header
    background-color:#f9f9f9;
    background-image:url(../images/default/grid/grid3-hrow.gif);

替换为：

.x-grid3-header
    background-color:#f9f9f9;
    background-image:url(../images/default/grid/grid3-hrow-over.gif);

告诉我是不是这样...

【讨论】：

如果您不想更改框架文件，也可以在自己的 CSS 文件中覆盖它。 （我认为如果您保留原始文件原样会更好）

加尔。我尝试了您的建议，但它仅用于更改栏，不显示下拉箭头（仅供参考，我使用的是“灰色”主题。）。箭头似乎是标题中的自己的元素。我确定如果我玩过并找到了正确的 css 选择器，我可以随时使用您的建议应用箭头。感谢您的意见，无论如何！