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'属性的位置。