[Ext JS 4] Load Component config via Ajax

[mitchellsimoens]

I have seen people wanting to load configurations for a Component via Ajax... Now that Ext.Ajax.request support sync requests, this is quite easy to do with all built in stuff.

So a normal Ext.window.Window can be configured like this:

var win = Ext.create('Ext.window.Window', {
    width  : 400,
    height : 400,
    title  : 'Title',
    html   : 'Hello'
});

So how can we accomplish this? In the constructor, first thing we can fire off a sync Ajax call that will stop everything until it loads and then apply what gets returned to the config. Here is the response I am returning:

{"width":600,"height":200,"title":"My Title","html":"Hello Mitchell!"}

And here is the new class I defined:

Ext.define('MyWin', {
    extend : 'Ext.window.Window',
    alias  : 'widget.mywin',

    constructor: function(config) {
        var me = this;

        Ext.Ajax.request({
            url    : 'test.php',
            async  : false,
            parmas : {
                cmpId : 'MyWin'
            },

            callback : function(opts, success, response) {
                var json = response.resonseJSON || Ext.decode(response.responseText, true);

                Ext.apply(config, json);
            }
        });

        me.callParent(arguments);
    }
});

and instantiating the class:

var win = Ext.create('MyWin', {
    width  : 400,
    height : 400,
    title  : 'Title',
    html   : 'Hello'
});

I left the config stuff there to show that it will get overwritten.

Downside to this is that if you have 20 classes defined this way and you have some complex layout that you want to render them all at once, this will fire 20 different sync Ajax calls so it may take a while to load them all. Plus, it will fire an Ajax call for every instance. Not the most efficient.

To do this correctly, kind of need to have a way to load a component config and define the class in the callback. This way it could be async or sync at startup. Sync may be better... will work on that now!

[maikhorma]

Thanks for the example. Just wanted to point out a minor typo in the Ajax request with "parmas" instead of "params"

[hataru]

why in Ext Js 4 Documentation about Ext.Ajax there no refs about the "async : false," ?