View Full Version : How to create a header like the one at KitchenSink sample?

25 Mar 2013, 1:46 PM

I need to create a header like the one at KitchenSink (http://docs.sencha.com/ext-js/4-2/#!/example/build/KitchenSink/ext-theme-neptune/)(Classic theme) sample:


Can I learn its CSS and usage?
Thanks in advance.

25 Mar 2013, 7:34 PM
This is simple when you look at the source code.

Download the 4.2.0 edition and then browse to the examples folder and look in the "kitchensink" folder.

If you look at /kitchensink/app/view/viewport.js you will see the items config

region: 'north',
xtype: 'appHeader'

So then you need to look at /kitchensink/app/view/Header.js where you will find the HTML being use along with the id of the DOM element..."id: 'app-header-title'".

You can then look for that ID in the CSS file by looking in examples/build/kitchensink/ext-theme-neptune/resources/KitchenSink-example.css

If you search for "app-header-title" you will find

#app-header-title {
padding: 15px 10px 10px 31px;
background: url(images/logo.png) no-repeat 10px 11px;
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 0 1px 0 #4e691f;

Of course you would want to do all of this in your SCSS files...but this should give you an idea of what to do.

25 Mar 2013, 8:58 PM
Got it, thanks for your help.