Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

Tags: css,extjs,extjs4,extjs4.2

Problem :

I need to create a header like the one at KitchenSink(Classic theme) sample:

KitchenSink Sample Header

How can I learn its CSS and usage?

Solution :

It's a custom element that extends the very generic 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"})

Most of its styling happens in custom CSS though. See CSS for #app-header-title.

    CSS Howto..

    How to style radcombobox item so that words that wrap are separated

    how to position heading in the center of the page

    How can I change the font (family) for the labels in Chart.JS?

    how to make animated 404 gears?

    How to debug HTML/CSS for iPhone/iPad performance?

    Speechbubble tooltip in CSS - how to move the arrow

    how to give css only the 1st label span?

    How to calculate width of unused space for page with fixed width?

    How can I hide the extra list items that don't fit within a fixed-height box?

    How can i use “z-index” as an css attribute selector?

    How do I conditionally apply CSS styles in AngularJS?

    How to give slide down effect when hover?

    How to check if CSS is on an element? [closed]

    How to set border to 0 in this table

    How to set a dynamic CSS value with JavaScript

    How do I make the .left class appear below the header but keep the header position as fixed?

    How do I make footer take 100% of the width of the webpage?

    How much overflow in a DOM element

    How does CSS height get applied to input fields?

    How can I change Javascript Value into percentage instead of pixels

    how to tint image in div when clicked for 0.5 seconds

    How To Apply jQuery CSS Selector

    How do I make the link in the back div clickable

    How can I drag an element into a dropdown list using jQuery UI sortable()?

    Can't show updated image

    HTML / CSS How to add image icon to input type=“button”?

    How to remove underline in css for anchors pseudo element in IE

    How Do you combine CSS code to an HTML code? I want to Combine them? [closed]

    How to change checkbox's border style in CSS?

    how to use two css style in a div or span