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

Question

我有嵌套标签面板，（外部标签面板组内部标签），外部面板是“联系人”，然后在其中，每个打开的联系人项目都有一个标签面板，另一个外部面板是“商机”，其中包含每个机会的标签面板。

这首先让用户感到困惑，所以我想在选项卡面板中添加一些样式，这样用户就可以区分外部标签和内部标签并为其提供意义。

在使用tabPanel进行syling时，我没有成功，这是正确的方法吗？ 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练习。