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 的“Inspect Element”（右键单击 chrome 中的标题并转到 Inspect Element）来确定我需要覆盖的 CSS 类以及我需要在哪里设置 'cls' 属性。