Is this the right way to restyle an ExtJS application?

I have a web application in ExtJS and used the Gray Theme.

Now I want to adapt it to a specific layout design, e.g. I want to change the color and add a graphic behind the word "Application". I've been reading information on how to edit ExtJS Themes but it's not the core components that I want to change but specific areas on the screen, e.g. this page header.

So the way I'm going about this is looking at the HTML output in Firebug:

and then in an extra CSS file styling the tags that I think are going to effect my style change, e.g.

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

which for the most part works but this but this seems to be very hit-and-miss, e.g. in some places the only way I can style the area I need is to use the seemingly arbitrary element id, e.g.

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

This seems very fragile, as if thes开发者_运维百科e id numbers might change in the future etc.

Is this the correct way to go about styling an ExtJS application or is there a more appropriate way?

This isn't the correct way since the ids are not guaranteed to be the same. Most ext components have a style property that you can use to customize the css or you can specify a css class to use for the style. You would do this in your component definition.

Now if you wanted to override an ExtJS css class for every component then you would do it like your first example.

most objects have a cls property that you can set to define a custom class you 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' }) ]
    } ]
});