extjs 3.xタブパネルのスタイリング

Question

外側のパネルのように、タブパネル（外側のタブパネルグループの内側タブ）があり、開いている連絡先アイテムごとにタブパネルがあります。パネルは「オポチュニティ」であり、その中にはオープンな機会ごとにタブパネルがあります。

これは最初はユーザーにとって混乱を招くので、タブパネルにいくつかのスタイリングを追加して、ユーザーが区別して外側と内側のタブを区別できるようにしたいと思います。

私はtabPanelをシリングするのに苦労しましたが、それを行う正しい方法は何ですか？ bodyCfg、tbar、tbarCls、baseClass ????私はExtJSのウィジェットをスタイリングすることは一度もしていませんでした。半日も苦労しています。

特にTabPanelsでどのようにスタイリングが機能するかについてのあらゆる情報がありがたいです。

おかげで、

Hazım

Answer 1

私は、多くの場合、あなたはそれがExtJSのコントロールをスタイリングに来るときCSSで汚れた手を取得する必要があります以上のものを見つけます。

これは私がこれまで行ってきた一般的な戦略です。

1. クロムデバッガなどが必要です.HTMLを表示してCSSスタイルを変更する必要があります。

2. クロムデバッガのウィジェットのHTMLを見て、スタイルを設定する必要のある正確なDOMノードが見つかるまで手作業で調整します。

3. ウィジェットで、ステップ2で見つけたノードのスタイルを設定するための設定変数を探します。ほとんどの変数の名前は "xxxCls"です。これは経験を必要とします。ショートカットはありません。たとえば、 "baseCls"を設定し、結果のHTMLを見て、そのクラスがDOMツリーのどこに挿入されているかを確認します。

4. 多くの場合、必要なもの（たとえば、ほとんどのパネルのヘッ​​ダーバーの行の高さ）を設定するための設定変数はありません。この場合、デフォルトのExtJS CSSクラスを必要な値に上書きする必要があります。標準の良いCSSの習慣が適用されます。