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"})
        }
        this.callParent()
    }
});

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


    CSS Howto..

    How to apply last-child only for first nested li?

    how do I override user agent — using buttons from angularjs

    How to blur background img - css?

    How to align logo and text in bootstrap on small screens?

    How can I avoid space while using pseudo-elements in multi-line markup?

    How to show two rows of div in single div

    how to create navbar without float?

    How can I customize COUNT nodes with css

    How to get 60 fps in css element width animation?

    how to select margin for a background image in CSS/CSS3?

    How do I center a table?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    How can I give an image a black opaque overlay?

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    How do I select all div-elements where first-child is not a table

    How to implement Star Rating in Intel XDK by App Framework 3.0

    CSS - How to show only a % of the top div with two identicals divs stacked over each other

    How to add footer to the bottom of the page

    How can I use CSS to show and hide multiple elements at once?

    css how to make two div side by side

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to override CSS style during hover in a table row?

    Jquery Mobile dynamic thumbnail list-How to create a border?

    How to fix too long css dropdown in Foundation 4 top bar?

    How to use CSS to place text on different sizes of images?

    How to fix this css error in IE7 and lower?

    How to preform whitelist-based CSS filtering in PHP

    How do you put two divs next to each other so they fill up the available space

    How do I get my body to the bottom of my page OR further if necessary?

    How do I implement this basic CSS for just one category?