css - Ext JS 4.2-KitchenSinkサンプルのようなヘッダーを作成するにはどうすればよいですか？

Question

KitchenSink（クラシックテーマ）サンプルのようなヘッダーを作成する必要があります。

CSSと使用法をどのように学ぶことができますか？

Answer 1

これは、非常に一般的なExt.Containerを拡張するカスタム要素です。

Ext.define("KitchenSink.view.Header", {
    extend: Ext.Container,
    xtype: "appHeader",
    id: "app-header",
    height: 52,
    layout: {type: "hbox",align: "middle"},
    initComponent: function() {
        this.items = [{xtype: "component",id: "app-header-title",html: "Ext JS Kitchen Sink",flex: 1}];
        if (!Ext.getCmp("options-toolbar")) {
            this.items.push({xtype: "themeSwitcher"})
        }
        this.callParent()
    }
});

ただし、そのスタイルのほとんどはカスタムCSSで行われます。CSSを参照してください#app-header-title。

Answer 2

これは、ExtJSを学ぶ上で難しい部分です。chromeで「InspectElement」を使用し（chromeのヘッダーを右クリックして「InspectElement」に移動）、上書きする必要のあるCSSクラスと、「cls」プロパティを設定する必要がある場所を特定します。