如何在 extjs4 中更改选项卡面板标题（标题）和面板标题的样式

Posted 2023-02-26

【中文标题】如何在 extjs4 中更改选项卡面板标题（标题）和面板标题的样式

【英文标题】：How to change style of tab panel headers(title) and panel headers in extjs4

【发布时间】：2012-08-10 14:18:22

【问题描述】：

我想知道是否有任何 css 类我可以覆盖，以便我可以更改所有选项卡面板标题和面板标题样式？？？ 如果可以的话，请告诉我

谢谢

【参考方案1】：

对于面板标题： 要更改文本的样式，请专门使用以下类： x-panel-header-text x-panel-header-text-default 要更改背景，您需要修改：x-panel-header-default

对于选项卡标题，您需要修改： 对于文本：x-tab-inner 对于背景，有很多类会影响背景的显示方式： x-tab x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab -top x-tab-default-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active

由于 CSS 计算元素样式的方式，如果您对 CSS 不是很擅长，您可能需要在更改的每个属性中使用 !important，否则如果您知道如何更好地使用 CSS，请使用 google chrome检查元素并找出 Extjs 以更专业的方式使用的类的 CSS 层次结构。

【参考方案2】：

用于设置标签页眉中文本的样式：

选择“a.ajax__tab_tab”向您的 CSS 文件添加规则并从那里设置颜色/其他属性。

这将影响 TabContainer 中每个选项卡标题中的文本。

例子：

a.ajax__tab_tab 
color: #00898D;

【参考方案3】：

你不直接使用css

您应该只更改 sass 变量，然后 sencha cmd 会将它们转换为上述值。每个组件的 SASS 变量都在菜单的文档中。