PDA

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



talha06
25 Mar 2013, 1:46 PM
Hello,

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:

42694


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

MikeRH
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.

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