extjs 3.x 样式化选项卡面板

Question

我有嵌套的选项卡面板，（外部选项卡面板分组内部选项卡），就像外部面板是联系人，然后在里面你有一个用于每个打开的联系人项目的选项卡面板，另一个外部面板是机会，在里面你有每个打开的机会的选项卡面板。

这首先让用户感到困惑，所以我想为选项卡面板添加一些样式，以便用户可以区分外部选项卡和内部选项卡并赋予其意义。

我在设置 tabPanel 时的成功率为零，正确的做法是什么？ bodyCfg, tbar, tbarCls, baseClass????我从来没有处理过在 ExtJS 中设置小部件的样式，而且我挣扎了半天没有成功。

任何关于样式如何工作的指针，特别是对于 TabPanels 表示赞赏。

谢谢，

哈兹姆

Answer 1

我发现在设置 ExtJS 控件样式时，您经常需要使用 CSS。

这是我遵循的总体策略，到目前为止一直对我有用。

1. 您需要 chrome 调试器或类似工具，以便您查看 HTML 并即时更改 CSS 样式。

2. 在 chrome 调试器中查看小部件的 HTML 并手动调整样式，直到找到您需要设置样式的确切 DOM 节点。

3. 在小部件中查找一个配置变量，该变量允许您设置在步骤 2 中找到的节点的样式。大多数变量名为“xxxCls”。这需要经验，没有捷径可走，例如，您可以设置“baseCls”并查看生成的 HTML 以查看该类在 DOM 树中的插入位置。

4. 你经常会发现没有可用的配置变量来设置你想要的样式（例如大多数面板中标题栏的行高）。在这种情况下，您必须将默认的 ExtJS CSS 类覆盖为您想要的值。标准的良好 CSS 实践适用。