Css Ext JS 4.2-如何创建类似KitchenSink示例的标题？

我需要创建一个类似于经典主题示例的标题：

---

如何学习它的CSS和用法？

这是学习ExtJS的一个棘手部分。我将“Inspect Element”与chrome一起使用，右键单击chrome中的标题，然后转到Inspect Element以确定需要覆盖的CSS类以及需要设置“cls”属性的位置

它是一个自定义元素，扩展了非常通用的Ext.容器：

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以获取应用程序标题。

@talha06-Hah，你让我失望了吗？如果您检查它，您将看到正在使用的CSS样式和类，这就是您要问的。我不知道为什么那应该被否决。我没有投票否决你。它不是一个单一的css属性，当我尝试以这种方式合并属性时，我无法获得正确的标题。图标未正确显示。否决票可能是因为您提交的答案不是答案，这就是问题的评论部分的目的。我最初发布该答案时还无法发表评论，当时没有足够的代表性。我认为这不是ExtJS的真正组成部分。这是自定义CSS。查找应用程序标题及其CSS。不过，定位是ExtJS的一部分。它看起来像一个定制的KitchenSink.view.Header：一切正常，除了它没有应用瞬态效果，尽管我包括了应用程序标题和应用程序标题CSS定义。什么瞬态效果？你是说梯度？这在app-header中。非常感谢您的关心和耐心。它按预期工作。