Tuning Your ExtJS Theme

ExtJS is my favorite JavaScript favorite. The guys at Sencha have done an excellent job at building the best JavaScript framework for building intranet RIAs. The only flaw of ExtJS is the lack of themes. Although the provided blue and gray themes are very nice, after looking at them for two years you start to long for more variety.

There have been some attempts to theme ExtJS. Extthemes has built a pretty nice collection of commercial themes, but sometimes all I need is a little bling without the need to completely re-theme the framework. For example, on a recent project, I’m starting to introduce ExtJS and am making use of the Ext.Panel widget for laying out div elements.

Here’s what a basic Panel looks like in ExtJS:

ExtJS default panel

And here’s the code I used to create the panel:

var panel = new Ext.Panel({
      width: 200,
      height: 200,
      title: 'Test Panel',
      renderTo: 'box'
});

I’ve got a div specified in the HTML like this <div id="box"></div> which is where the Panel is being rendered to. This is very nice if your site’s look-and-feel is baby blue, but this won’t cut it if you need a different color scheme. Fortunately, Panels are extremely easy to stylize through some simple CSS overrides.

The first step is to decide what color you need for the Panel’s header. The default theme uses a gradient image, which looks better than just specifying a background color. Gradients are pretty easy to created in Photoshop, but you can get a very nice gradient that exactly matches your needs by taking advantage of the Themeroller tool for JQuery UI. Use the Header/Toolbar customization and choose the color and gradient effect you want for the header.

After you have the header just the way you want it, download the whole theme bundle, extract it someplace and copy the image file for the header into your project directory.

There are three CSS selectors you need to override to apply your customization to the Panel. They are .x-panel-header, .xpanel-header-text and .x-panel-body. For my example, I just borrowed the header image for the Eggplant theme and configured these selectors to produce the following:

ExtJS styled panel

Here is what I specified in my CSS file to override the default style:

.x-panel-header {
  background: url(resources/images/eggplant.png) center left repeat-x;
  text-align: center;
  border-color: #000;
}

.x-panel-body {
  border-color: #000;
  background-color: #fafad2;
}

.x-panel-header-text {
  font: bold 14px Consolas, Arial, san-serif;
  color: #eee;
}

In the .x-panel-header selector, I specified the background to be the header image I got out of the Themeroller theme. For a little added bling, I changed the text alignment to center the text and set the border color to black. Note, I renamed the gradient image from the cryptic name Themeroller created to eggplant.png.

For the .x-panel-body selector, I set the border color to match the one I specified in the selector above. If you don’t do this, you’ll still have the default border around the center. I also specify a light-yellow background color for the contents of the Panel.

Finally, for the .x-panel-header-text section, I change the appearance of the font from the default blue text to a white text in a different font.

Now you have a panel which can perfectly match any color scheme you need to support and it gives you a simple way to introduce ExtJS without it standing out from what you are already doing. For example, on my project, I’m going to use a pair of Ext.Panel widgets on the sidebar for navigation and a most-recently-used files list, which looks something like this:

ExtJS custom panels

In this example, the theme is still blue, but I changed the header gradient, the shade of blue for the lines, and applied a light-gray background.

Some Tips

  1. Firebug or Webkit (Chrome/Safari) are your friends. Use the element inspectors to look at what classes are applied to the various ExtJS widgets. Theming ExtJS is all about overriding the existing styles.
  2. Panels are about the easiest thing to style, and it gets harder from there. If you really want to get a custom theme, I suggest start by working with the x-theme-gray.css and then overriding from there. The gray theme will give you widgets that blend pretty easily with any theme, and then you can selectively add some bling to the elements you care about.
  3. Remember that your overridden styles must come after the stylesheet link for ExtJS. For example, if your stylesheet with the overridden styles is called custom.css, ensure your header section contains this:
    
    
    
    

8 thoughts on “Tuning Your ExtJS Theme”

  1. Are the “View All”, “New Form”, … entries all seperated panels? How did you get the line between them?

  2. No, those are just a styled <ul>, with each of the items being a <li>. Each of those has a bottom border, except for the last one. I then put the list into a div and told the Panel to use the contents of that div as its contents by using the contentEl property of the Panel.

    I’ll do a post on how I laid out the two Panels.

    -Tim

  3. What if I want to change the height of the header panel, for example? This value is hardcoded somewhere in the classes.js file, and it is an element style that overrides the values in any CSS files.

  4. how i can change color of viewport region extjs 4

    I am using SASS and trying to change the colour of a Viewport region using extjs 4.

    Can someone tell me how this can be achived?

Leave a Reply

Your email address will not be published. Required fields are marked *


*