Ability to specify a custom renderer for a Panel.

January 8th, 2009
  • If you specify autoLoad:'/foo/bar' for a Panel, it will quickly call load() on the element which will get the Updater which will use a default renderer.

    There will be no opportunity to access the Updater before the load method is called to inject a custom renderer.

    Could we have renderer as a config option?

    The only change would be


    doAutoLoad : function(){
    var u = this.body.getUpdater();
    if (this.renderer) {
    u.setRenderer(this.renderer);
    }
    u.update(
    typeof this.autoLoad == 'object' ?
    this.autoLoad : {url: this.autoLoad});
    }


  • Will forward to Jack for review.


  • Bump!

    People are still trying to use autoLoad to execute script. What is happening is that a blank HTML document is being used as a vehicle for embedded script.

    You could even provide a custom script-executing renderer instead of the default innerHTML-updating renderer.


  • Doug Hendric (hendricd) suggested a good technique on another thread.

    Allow specification of a renderer in the autoLoad object, so:


    new Ext.Panel({
    autoLoad: {
    url: 'getFormJson.php',
    renderer: {
    function(el, response, updater, callback) {
    }
    }
    }
    });


    That would mean the change would be to the Ext.Updater.update method which would be more logical. It is the Updater which uses renderers, not Panels themselves.

    In fact an evaluating renderer should probably be included in Ext.Updater, so you could use


    new Ext.Panel({
    autoLoad: {
    url: 'getFormJson.php',
    renderer: Ext.Updater.jsonRenderer
    }
    });


    where jsonRenderer is declared in the Updater's prototype (It doesn't really need to be a class does it?


    jsonRenderer: {
    function(el, response, updater, callback) {
    eval(response.responseText);
    if (callback) {
    callback();
    }
    }
    }


  • Thanks Brian. It's an issue that has started to appear in forum questions now that people are using the autoLoad config, but going down the Ext route of not generating HTML at the server, but sending data instead.


  • Edit: I don't see why not. :)


  • The workaround for now is:


    Ext.override(Ext.Panel, {
    doAutoLoad : function(){
    var u = this.body.getUpdater();
    if (this.renderer) {
    u.setRenderer(this.renderer);
    }
    u.update(
    typeof this.autoLoad == 'object' ?
    this.autoLoad : {url: this.autoLoad});
    }
    });


    So that allows you to do


    new Ext.Panel({
    title: 'Created from JSON using custom rendering',
    autoLoad: '/getJson.do',
    renderer: {
    render: function(el, response, updater, callback) {
    // eval(response.responseText) and do processing to update el.
    }
    }
    });







    • #If you have any other info about this subject , Please add it free.#
    Your name:
    E-mail:
    Telphone:

    Your comments:


    If you have any other info about Ability to specify a custom renderer for a Panel. , Please add it free.

    Posted in freedeadaim.com | edit