View Full Version : Aplying css styling to each widget independently

16 May 2012, 3:59 AM
I have a login page where I have a column layout with a panel and a form inside it.
Now I want to customize the design look and feel.So I tried to change the background image for the outer panel like this

.x-panel-header {
background: url(images/phpThumb_generated_thumbnail.png) center left repeat-x;
text-align: center;
/*border-color: #000;*/
.x-panel-body {
background: url(images/login_welcome_ce_bkgd.jpg);
background-repeat: no-repeat;

Basically by overriding the panel css.

But the same css gets rendered to the form panel also.
So,I tried adding my customized css by giving a 'cls' attribute to the panel and wrote my css,but this doesn't seem to work.

background: url(images/logo.jpg) center left no-repeat;

how can I overcome this issue??

16 May 2012, 4:13 AM
To display an image in the background of a panel, use the bodyCls style.

I typically create my own override CSS style:

.bodyImage {
background: url('../images/someImage.gif');
background-repeat: no-repeat;

And in the target panel, do this:

xtype: 'panel',
bodyCls: 'bodyImage'

16 May 2012, 4:44 AM
@friend Its working.
I want to apply styles to buttons and other widgets also.Hope the same works.

Also,I did not find any documentation or examples related to styling rules(I cant post each and every issue,better I study it well8-|).
Can you please point me to any useful links.

I can't get tired of thanking you!!!Thanks again.

16 May 2012, 8:28 AM
@friend I am not able to resolve the resolution issue.My app looks good on one(1024 x 768) and gets stuck on other.
Basically with HTML we can overcome by giving the width and height in percentage.

But how to do that in extjs???
Like for a panel

title: 'Welcome to New Astron Solutions',
width: 1000,

How can I say 100% or 90% of the total width??


16 May 2012, 10:20 AM
Regarding custom styling of components, Ext Js provides standard configuration attributes to let you override CSS styles for different parts of a component. Using Ext.panel.Panel, you'll see config attributes like baseCls, bodyCls, cls, componentCls, etc. Read through the API docs for these properties and you'll get a good feel for how they affect different aspects of a component.

As a rule of thumb, I generally shy away from to much custom styling of components so that I don't break things or make future Ext version migrations more difficult. I generally add Ext.Img components to the various panels/containers in an app to give it a more personal/custom feel. I always set iconCls on buttons throughout the app, where I use famfamfam.com (http://www.famfamfam.com)'s free silk (http://www.famfamfam.com/lab/icons/silk/) icon set. This goes a long way towards providing uniformity of graphical look and feel throughout an app.

As for resolution issues, 'anchor' layouts are particularly handy as they allow you to set a percentage of width (and optionally, height) for a component or panel. You'll also note that a lot of commercial web sites declare a fixed width, center content panel with auto-margined whitespace left and right. This gives you a consistent width to work with for all content panels.

As an example, checkout www.newegg.com (http://www.newegg.com). Maximize the browser to fill your screen and note the layout of their content. In my opinion, this is a good design model to follow.