Extjs is one of the most popular libraries to build rich desktop applications. Why ? well, it’s hard to explain, just have a look of what you can do with this library.

Sweet, isn’t it. If you are not impressed notice that all those windows, charts, menu are in a browser. Extjs makes you able to replicate a full desktop experience in a browser container.

The drawback of this is that you code all in javascript, you don’t see any html line at all. If you are comfortable with, you can use Extjs thanks to its dual license: GNU GPL v3 for opensource project and a commercial license if you want to use Extjs in your closed source application. Also the license is per developer seat which means that you can code as much as you want with a single license if you are a freelancer.

I’ve learned to code using Extjs as I always do, trial and error, by examples. Extjs has a huge amount of examples but not all of them have the same code styles and this may lead in having your project  not very well organized. To overcome this, you may want to have a look at Mastering Extjs. I’ve contributed in reviewing this book and I have to admit that the way it teaches how to use Extjs by organic examples and increased difficulty optimizes the time you have to spend to truly understand how a complex framework like Extjs works.  Even if I worked with Extjs from few years I’ve found some techniques and code examples having a better approach instead of the solution I would code without ever reading the book.

The book assumes that you have a basic understanding of the Extjs framework. This basic understanding is very low tho. I can estimate that it takes 1/2 days reading some Extjs examples to have that knowledge. It will focus on having a good code style, multilingual support and a clear unerstanding of the MVC pattern in Extjs. At the end the book will propose ways to optimize the source code and reduce the size of the code that the browser has to download in order to speed up page load and in general app responsiveness/speed.

One very good resources to find regexp or base for your regexp is for sure RegexLib in which a huge collection of regexps is exposed. 90% of the time I’ve to write a regexp I start browsing that site for ideas or pattern to use in my regexp. From this base i tend then to build my own regexp like in this case:

portsList = /^$|^(6[0-5]?[0-9]{0,2}[0-5]?|6[0-4]?[0-9]{0,3}|[1-5][0-9]{0,4}|[1-9][0-9]{0,3})(-(6[0-5]?[0-9]{0,2}[0-5]?|6[0-4]?[0-9]{0,3}|[1-5][0-9]{0,4}|[1-9][0-9]{0,3}))?((\s*,\s*)(6[0-5]?[0-9]{0,2}[0-5]?|6[0-4]?[0-9]{0,3}|[1-5][0-9]{0,4}|[1-9][0-9]{0,3})(-(6[0-5]?[0-9]{0,2}[0-5]?|6[0-4]?[0-9]{0,3}|[1-5][0-9]{0,4}|[1-9][0-9]{0,3}))?)*$/;

This *huge and hard to maintain* regexp recognizes a valid TCP/UDP port or port range which is a number between 0 and 65535 for port and a port-port for port range (there is an error in that regexp, have fun in finding it ). Never to say, that code is unmainteable, that’s why I usually try to describe regexps in a EBNF way. In EBNF you split your regexp in smaller regexp in variables such that you can reuse them.  For example we can define:

• port = […….]
• portList = port || port-port

This is usually easy in programming languages (like in python with its re module) but I found a little bit more tricky in javascript. So here are my rules:

1. Always use the RegExp object
2. Always compose regexp from strings
3. Always isolate regexp string between parenthesis.

In javascript you can create regexp using the RegExp object or using the / / operator. The advantage of the former is that you can compose the regexp using  strings. Look at this example:

var my_regexp = new RegExp("^hello world$");

var my_regexp = /^hello world$/;

The two statements are equivalent. The only difference is that the former is constructed with a string and we can thus put the string into a variable and compose those variables to a valid regexp string.

Isolation of the regexp between parenthesis may look verbose but makes the regexp less error prone and easy to debug. Applying all the rules you would be able to do something like:

var port = "(6553[0-5]|655[0-2]\\d|65[0-4]\\d\\d|6[0-4]\\d{3}|[1-5]\\d{4}|[1-9]\\d{0,3}|0)";

var port_or_port_range = "("+port+"(-"+port+")?)";

var my_regexp = new RegExp("^("+port_or_port_range+")((\\s*,\\s*)("+port_or_port_range+"))*$");

With these three lines we accomplished the same job of the first long regexp I posted. Much easier to maintain and use. Note the leading ( and trailing ) to the port regexp string and the my_regexp that uses the regexp object.

ExtJs has that feature: the very well designed Ext.Loader can load arbitrary javascript files just looking on the configured paths of the different resources. On the other side of the most common libraries, Jquery has the $.getScript() function that does exactly the same thing, in a more dummy way. It just loads the javascript in the path passed as argument.

None of them are able to handle css, tho. So I wrote a small, library independent function to load a javascript or css dynamically. Here is the code:

var loadfile = (function(){
    //our hash table to keep record of already loaded files
    var loadedfiles = {};
    //TODO add callback
    return function(filenames, callback){

        if(!(filenames instanceof Array)){
            if(typeof(filenames) == 'string'){
                filenames = [filenames];
            }else{
                throw 'filenames is not an Array or a string';
            }
        }

        var map = {
            js: function(filename){
                var tag=document.createElement('script');
                tag.setAttribute("type","text/javascript");
                tag.setAttribute("src", filename);
                return tag;
            },
            css: function(filename){
                var tag=document.createElement("link");
                tag.setAttribute("rel", "stylesheet");
                tag.setAttribute("type", "text/css");
                tag.setAttribute("href", filename);
                return tag;
            }
        },i,length,type,tag,filename, ext;

        length = filenames.length;
        if(length>0){
            for(i=0; i<length; i++){
                filename = filenames[i];

                if(loadedfiles[filename])
                    //continue if we have already loaded this file
                    continue;

                type = filename.lastIndexOf('.');

                if(type === -1)
                    throw filename+' is not a valid filename with extension';

                ext = filename.slice(type+1);

                //create correct tag
                tag = map[ext](filename);

                //append to head
                document.getElementsByTagName("head")[0].appendChild(tag);

                //update hash table for files we've already loaded
                loadedfiles[filename] = true;

                //call callback
                if(callback && typeof(callback) === 'function')
                    callback(filename);
            }
        }
    };
})();

The loadfile function uses closure to store an hashmap of the loaded file and accepts an single string or an array of strings representing the paths to load. It also accepts an optional callback function that will be called if and when the script has been loaded into the page.

Feel free to use it as you wish. And if you like, give me some credit!