Archive

extjs single page javascript ajax application

ExtJs is a JavaScript widget framework that came to great popularity in recent years, especially at large companies that build complex web applications. This vision of rich component toolkit that allows for consistent UI look and feel, with the power of ajax interactions that beat the performance of traditional post pack mechanisms.

While there are many examples, and event showcase applications, I have not seen any model how to create an JavaScript applications, that can go from "screen" A to totally different "screen" B, where the screen specifications (structure + logic) would come from a server request. (If you have a large JavaScript app that has 100 screens, reloading all the screen definitions would be a waist, and going from page to page (reloading all the Js, css, images, almost a 1 meg of resources) would be event bigger waste.

So let's get into the example: first we will create a custom object that will be returned from the ajax call. This object, packed in a closure contains both, logic and layout definition of our screens, and when decoded (evaled) becomes a ExtJs screen object, that you can just render on the page.

(function(){
    
    //app logic goes here
    var clickHandler = function(){
        alert("Helo world!");
    };
    
    //view json goes here
    var items = {
        "xtype":"panel",
        "title":"My Panel",
        "layout":"table",
        "items" : [
            {
                "xtype":"container",
                "autoEl":"div",
                "html":"Helo world!"
            },
            {
                "xtype":"button",
                "text":"Click Me",
                "handler": clickHandler
            }
        ]
        };

    //adding a callback
    return new Ext.Container({
        items: items
    });

})()

Next, here comes the magic file. Our "ajax url" will be stored in our "hash" (#ajax/myScreen). This allows us to have "history/back button" support, and also ability to maintain an ajax application session (to an extend). By the way, this is trick that facebook currently uses to "ajaxtify" its pages

(function(){

    //load page function
    var loadPage = function(url){
            
            Ext.Ajax.request({
                url: url,
                success: function(jsonResult) {
                    
                    //turn ajax response into js object
                    var jsonData = Ext.decode(jsonResult.responseText);
                    
                    //render page
                    jsonData.render(Ext.getBody());
                    
                },
                failure: function() {
                    alert("something went wrong!");
                }
        });
    }

    //get hash function
    var getHashValue = function() {

        var arr = window.location.hash.split("#");

        var hasValue = arr[1];

        //sets default
        if (typeof hasValue == "undefined") {
            return false;
        }

        var hashLen = hasValue.indexOf("?");
        if(hashLen>0){
            hasValue = hasValue.substring(0,hashLen);
        }
        return hasValue;

    }

    //hash change event listerner
    var onHashChange = function(event) {

        //last hash
        var lastHash = getHashValue();

        //checker
        (function watchHash() {
            var hash = getHashValue();

            if (hash !== lastHash) {
                event();
                lastHash = hash;
            }

            var t = setTimeout(watchHash, 100);

        })();

    } 
    
    //on hash change trigger
    onHashChange(function() {

        //your on-change code here
        var url = getHashValue();
        loadPage(url);
        
    });

})();

Comments: