css - Ext JS 4.2 - 如何创建类似于 KitchenSink 示例中的 header ？

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 中。请参阅 #app-header-title 的 CSS。