How to display an ExtJS window with a different colour

I need to display a window Ext.Window with a colour different to that of the default theme. Changing the colour of the gu开发者_StackOverflowts of the window is easy enough. Changing the colour of the chrome of all popup windows is also very easy. Changing the chrome of a single window seems extremely hard. Best as I can tell, you need to copy all the styles (x-window and similar), rename and customise them and set the baseCls of the window.

Is there an easier way to do this?

In configs for the window ...

bodyCls: 'popWindow',

and then somewhere in a css

.popWindow
{
    background-color: blue;
}

You can add your own custom class to the window, then write CSS rules for that class.

Check out the cls config option or the addCls method on Ext.Window. Try it out, then inspect the class applied to your window to figure out where to apply your CSS rules.

Here's the doc for Ext.Window. In Ext 3.x, I believe the method is addClass. But the config option was still cls (I think).

Sorry to answer my own question, but I finally worked out a way to colour a single window in isolation of other windows. Initially I thought I was going to have to clone the entire x-window set of classes and modify the clone but I have since found an easier way to do it.

I got a lot of help from this link but also used a lot of trial an error as my CSS skills suck

1. You'll need to clone and edit the background images used by the overriding css. The files you'll need are top-bottom.png, left-right.png, left-corners.png, right-corners.png and tool-sprites.gif
2. The window that you wish to colour needs to have an id ('defn_display' in this example).

3. Set the bodyCls of the window to a separate class that sets the background colour. For example:

   .defn_content 
   {
       background: #FFFFDD !important;
   }
   

4. You need to set up the css class selectors to override the x-window classes based upon this id using the new images cloned in step 1.

   #defn_display * .x-window-tc {
       background-image: url("/static/images/defn-top-bottom.png");  
   }  
   
   #defn_display * .x-window-ml {  
       background-image: url("/static/images/defn-left-right.png");  
   }   
   
   #defn_display * .x-window-mr {  
       background-image: url("/static/images/defn-left-right.png");  
   }  
   
   #defn_display * .x-window-tl {  
       background-image: url("/static/images/defn-left-corners.png");  
   }  
   
   #defn_display .x-window-tl {  
       background-image: url("/static/images/defn-left-corners.png");  
   }  
   
   #defn_display * .x-window-bl  {  
       background-image: url("/static/images/defn-left-corners.png");  
   }  
   
   #defn_display * .x-window-tr  {  
       background-image: url("/static/images/defn-right-corners.png");  
   }  
   
   #defn_display * .x-window-br {  
       background-image: url("/static/images/defn-right-corners.png");  
   }  
   
   #defn_display  * .x-window-bc {
       background-image: url("/static/images/defn-top-bottom.png");
   }
   
   #defn_display .x-tool {  
       background-image: url("/static/images/defn-tool-sprites.gif");  
   }  
   
   #defn_display * .x-window-header-text {
       color: #515111;
   }
   

The CSS seems to do the trick with one exception: the drag ghost is tricky to override since it is not a child of the window. As such, I still get a blue ghost during dragging.

(Tested under FF, Chrome and IE6 with ExtJs 3.4)

Check the ui property. I never tried it by myself, but I heard on Sencha conference that it's possible. Good luck...