Links to information about ExtJS styling/theming


Like the title says:

The basics

The ‘official’ stuff is on the Senchasite but there are some good beginners guides/examples elsewhere. This includes a handy example of changing a windows to red. Not useful in itself but if you get it working you know everything is good. It also provides an introduction to use the ExtJS SDK’s ‘slice’ tool to create rounded-corner features to IE 6/7 which do not support them.

Tips

I found that even after following the instructions to install Ruby then the Compass and Saas Gems there were problems. One is resolved by using the version of Sass used by Sencha (3.1.1). At the time of writing the current version of Sass is 3.1.12 use of which causes errors during CSS compilation. The trick is to backup by uninstalling the Sass gem and installing the supported version:

1
2
gem uninstall sass
gem install sass -v 3.1.1
gem uninstall sass
gem install sass -v 3.1.1

You can tell which version you have installed by running the command:

1
sass -v 3.1.1
sass -v 3.1.1

When I began using the command “compass compile” I ran it from the resources/sass folder. This is a mistake. The compass app (or at least the way Sencha use it) is designed to be run from the application root folder. If recompiling the style sheets which come with ExtJS then this is the extjs root folder. If you see lots of warning messages as the compile process runs then you’re in the wrong folder. Compiling from the root folder looks like:

1
compass compile resources/sass
compass compile resources/sass

This is another post which shows how to get started creating your own theme. One of the screen shots in the post shows the type of warning messages mentioned above.

Slicing

When used in IE 6/7 the nicely rounded corners of controls like buttons are presented by using images as these browsers do not support CSS styles like box-radius. To work around this limitation the Sencha framework includes a tool to generate these additional images and spits out CSS that is specific to these IE versions.

Initially, I found the slicing tool did not work. Under the hood it uses a program called ext-theme and this stalled. Eventually I discovered ext-theme generates ExtJS scripts to work and, crucially, it requires ext-all-debug.js to be available in the target application’s extjs folder even if the application does not need or use this specific file. Go figure.

So the bottom line is that if you want to be able to generate images for use in IE it’s necessary to have ext-all-debug.js in your application’s extjs folder whether it’s used by your application or not.

Theming just one class of control

ExtJS supports the idea that some controls might need different skins or, at least, variants on the overall theme. This is accomplished by specifying an alternative ‘ui’ value. I’ve exploited the ability create alternative UIs to implement a simple sexybutton-like UI for toolbar buttons. These button skins are implemented by explicitly creating style classes following the Ext JS convention.

This post explores creating your own alternative theme css file to change the skin for a component.

Scoping

When using Ext JS in another application, for example embedding examples in a WordPress post, you don’t want ExtJS style rules stomping all over exising styles. To do this use one of the ‘scoped’ alternatives such as ext-all-scoped.css. However using such a CSS file on its own is not enough. The framework also needs to be told to scope its styles. This post shows how to configure Ext JS to use scoped CSS.

Building a production class file

Section 3 of the Getting Started guide which deals with deployment covers two commands which can be used to create production (minified) and debug code files. However in my experience, these ONLY work if the application references ‘ext.js’ (not any of the other options). The use of this file seem to force ExtJS to use the individual class files from the src/ folder which, in turn, means the ‘create’ command is able to generate a .jsb3 file listing all the used classes.

Information and Links

Join the fray by commenting, tracking what others have to say, or linking to it from your blog.


Other Posts

Write a Comment

Take a moment to comment and tell us what you think. Some basic HTML is allowed for formatting.

Reader Comments

Be the first to leave a comment!