1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,412
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default [Ext JS 4] Load Component config via Ajax

    [Ext JS 4] Load Component config via Ajax


    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:

    Code:
    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:

    Code:
    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:

    Code:
    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!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #2
    Sencha Premium Member
    Join Date
    Mar 2011
    Posts
    54
    Vote Rating
    1
    maikhorma is on a distinguished road

      0  

    Default


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

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
    hataru is on a distinguished road

      0  

    Default


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

Thread Participants: 2