extjs 3.x造型一个标签面板

Question

我有嵌套的标签面板（外部标签面板组内部标签），就像外部面板是联系人，然后在里面你有一个标签面板为每个打开的联系人项目，另一个外部面板就是机会，而且每个开放机会都有一个标签面板。

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

我对syling tabPanel有零成功的难度，什么是正确的方法来做到这一点？ bodyCfg，tbar，tbarCls，baseClass ????我从来没有在ExtJS中处理过一个小部件的设计，而我正在挣扎半天而没有成功。

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

感谢，

海济

Answer 1

我发现往往比你需要得到你的手脏与CSS，当谈到造型ExtJS的控制了。

这是我遵循的一般策略，目前为止我一直在为此工作。

1. 您需要使用chrome调试器或类似的工具，以便您可以实时查看HTML和更改CSS样式。

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

3. 在窗口小部件中查找一个配置变量，允许您设置在步骤2中找到的节点。大多数变量都命名为“xxxCls”。这需要经验，没有捷径，比如你可以做的就是设置“baseCls”并查看结果HTML，看看DOM树中插入类的位置。

4. 通常你会发现没有配置变量可用于设置你想要的东西（例如大多数面板中标题栏的行高）。在这种情况下，您将不得不将默认的ExtJS CSS类重写为所需的值。标准的良好CSS实践适用。