Is this the right way to recover an ExtJS application?

Question

I have a web application in ExtJS and use the Gray theme .

Now I want to adapt it to a specific layout design, for example. I want to change the color and add graphics behind the word "Application". I read information on how to edit ExtJS themes , but these are not the core components that I want to change but specific areas on the screen, for example this page title.

So, the way I do this is viewing the HTML output in Firebug:

and then in an additional CSS file in which styles are tags that I think will influence the style change, for example.

.x-panel-body-noheader { background-color: #307E7E; } 

which for the most part works, but that, but it seems to be very hit-and-miss , for example. in some places, the only way I can create the area that I need is to use apparently an arbitrary id element , for example.

 div#ext-comp-1003 { background-color: #307E7A; } 

It seems very fragile, as if these ID numbers could change in the future, etc.

Is this the right way to style an ExtJS application, or is there a better way?

Answer 1

This is not the right way, as identifiers are not guaranteed to be the same. Most ext components have a style property that you can use to configure css, or you can specify a css class to use in style. You would do this in your component definition.

Now, if you want to override the ExtJS css class for each component, you will do this as your first example.

Answer 2

most objects have a cls property that you can set to define a custom class defined in your css file. Here is one example of using it to apply a radial gradient to your main viewport ...

JsFiddle example

css CODE

 .gradient { background: #f1f1f1; /* Old browsers */ background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 30%, #eeeeee 100%); /* FF3.6+ */ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(30%,#ffffff), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */ background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */ background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* Opera 12+ */ background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* IE10+ */ background: radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 30%,#eeeeee 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } 

app.js CODE

 Ext.create('Ext.container.Viewport', { layout: 'fit', renderTo: document.body, cls: 'gradient', // use the css class .gradient items: [ { xtype: 'container', region: 'center', layout: { type: 'vbox', align: 'center', pack: 'center' }, items: [ Ext.create('Ext.Img',{ src : 'loginlogo.png' }) ] } ] });