Ext 2.x provided an online toolkit builder to customize the toolkit build (still available here). Unfortunately the builder is not available for Ext 3.x (there are comments on Ext forums saying such a builder would be available for Ext 4.x). Brian Moeskau (one of the original creators of ExtJs and the man behind Ext Calendar) has written an excellent tutorial for doing a custom build of ExtJs here.
But that article also seems obsolete at the time this post was written. The article mentions the toolkit using Google code hosted project js-builder for building the toolkit. But ExtJs 3.x actually uses JSBuilder 2.0 from Sencha itself for building the toolkit (dont get confused between these 2, the first of these (js-builder) is a Google code hosted project that was used earlier by ExtJs for build process, but ExtJs 3.x uses Sencha’s own product JSBuilder for the build process).
The build process for JSBuilder (Sencha’s product) is pretty intuitive and all necessary information is well documented with the 2 text files that come with the build utility. Basically, it boils down to a single line for the build process:
java -jar JSBuilder.jar -p I:\ext-3.3.1\ext.jsb2 -d I:\ext-built
The all-important file for the build process is obviously the ext.jsb2, the JSON formatted configuration file. It’s pretty easy to understand and you can quickly get the hang of things by looking at the core ext.jsb2 file that comes with ExtJs downloads.
However, there’s one very important precaution to take for the custom build process. Eliminate all css files from the resources/css folder before doing your custom-build (only the css files in this folder and not in its sub-folders). Let me explain why.
Obviously, as you are picking selected components from the toolkit, you would always want to trim the css file for minimizing load times. In my case, I just needed roughly 1/5th of the total ExtJs css for supporting the ComboBox only custom build.
On some investigation, I found the issue. The build configuration file has 3 main sections, one specifying the js files configuration and their dependencies, second for css configuration and their dependencies and the last one for the resources that are copied verbatim to the output folder (the License files, images, flash files etc. from the source).
Now JSBuilder parsed the configuration file, and executed actions in order (taking care of any dependencies). So, the js files were built first, then the css files, and finally the resources were copied to the destination.
Notice that the resources (including the entire resources folder from the source) were copied to the destination folder after css files were built. What happens is that the required css files specified in the .jsb2 configuration file are built in the output, producing the desired ext-all.css. But afterwards, it gets overwritten by the ext-all.css copied from the source folder as resources are being copied. So, essentially, you are left with the original ExtJs stylesheet and not your trimmed version of it.
The solution is also easy. Just remove all css files from “resources\css” folder from the source (including ext-all.css, ext-all-notheme.css, xtheme-blue.css, and xtheme-gray.css). But leave the css files in the sub-folders (structure, visuals sub-folders etc). So, now when you re-build, only the specified files would be assembled in ext-all.css which would not get overwritten subsequently while copying resources. It took me sometime to figure this out.
thanks for this tutorial. Just used it. Really easy to understand.
I will need the ExtJS Library for a project I am planning. As the ExtJS Library is really huge building your own pakage is absolutely necessary.
In my case I got from
662KB ext-all.js – 133kb ext-all.css
440KB ext-all.js – 26KB ext-all.css
I will try to compress it a little more. And with Gziped enabled its fine for a website I think.
Thanks a lot!
HI! Nice article! Is there a way to know the dependancies without guessing?
I need only the Ext.Panel and the Ext.Message components: how could I know exactly what I need?
Thanks in andvance