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實踐適用。