1. #1
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    oracle is on a distinguished road

      0  

    Default Passing arguments to component constructors via HTML templates

    Passing arguments to component constructors via HTML templates


    Hi all, i've written a patch to Ext.Component that lets you specify some constructor arguments directly in the placeholder or in the template of the new component.

    The code is the following:

    Code:
    Ext.Component.prototype.initComponent = function() {
        var parent = Ext.fly(this.renderTo);
        if(! parent || ! parent.dom.attributes['ext:config']) {
            return;
        }
    
        var config = parent.dom.attributes['ext:config'].nodeValue;
        var params = Ext.util.JSON.decode(config);
        Ext.apply(this, params);
        Ext.apply(this.initialConfig, params);
    }
    You can put this code just at the beginning of your app code.

    Here is how it works:
    Immagine to have a DOM element in your page that is a place holder for a component, in this element you can add an attribute in some namespaces (eg. ext) and put a json encoded string in.

    Example:
    Code:
    <div id="component" ext:config="{width:400,cls:'test'}" ></div>
    In this example we'll pass the arguments width: 400 and cls: 'test' to the constructor of the new class.

    Code:
            var txt1 = new Ext.form.TextField({
                renderTo: "component"
            });
    This is equivalent on writing:

    Code:
            var txt1 = new Ext.form.TextField({
                renderTo: "component",
                width: 400,
                cls: 'test' 
            });
    But the advantage is that you don't have to modify your js code to modify the width of your component, everybody will be able to modify that parameter.

    Here is a more complex example using a template:

    Code:
    <div id="componentTemplate">
        <div style="height:50px;margin-left:20px;width:100%;">
            <div id="{subComponntId}" ext:config="{width:400,cls:'toto'}" ></div>    
        </div>
    </div>
    and the js:

    Code:
    Ext.app.MyComponent = Ext.extend(Ext.Component, {
        onRender: function(ct, position){
            Ext.app.MyComponent.superclass.onRender.call(this, ct, position);
            
            var tpl = Ext.Template.from("componentTemplate");
            
            var ids = {
                subComponntId: Ext.id()
            };
            var html = tpl.apply(ids);
            
            this.el.update(html);
            
            var txt1 = new Ext.form.TextField({
                text: "test",
                renderTo: ids.subComponntId
            });
        }
    });
    Please feel free to leave your comments, suggestions and bug reports in this thread.

  2. #2
    Ext User jerrybrown5's Avatar
    Join Date
    Sep 2007
    Location
    Port St Lucie, FL
    Posts
    185
    Vote Rating
    0
    jerrybrown5 is on a distinguished road

      0  

    Default


    What a cool idea! +1

  3. #3
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    oracle is on a distinguished road

      0  

    Default


    Here is an interesting improovement to my code:

    Code:
    Ext.Element.prototype.hasConfig = function() {
        return this.dom.attributes['ext:config'] ? true : false;
    }
    
    Ext.Element.prototype.getConfig = function() {
        if(! this.hasConfig()) {
            return {};
        }
    
        var config = this.dom.attributes['ext:config'].nodeValue;
        return Ext.util.JSON.decode(config);
    }
    
    
    Ext.Component.prototype.initComponent = function() {
        var configEl = Ext.fly(this.configElement || this.renderTo);
    
        if(! configEl || ! configEl.hasConfig()) {
            return;
        }
    
        var params = configEl.getConfig();
        Ext.apply(this, params);
        Ext.apply(this.initialConfig, params);
    }
    With this one we can pass the config to an element, even if it isn't directly created in a placeholder:

    Code:
            var panel = new Ext.Panel({
                layout: 'form',
                renderTo: "myPanel",
                items: [{
                    xtype: 'textfield',
                    configElement: "textFieldConfig"
                }]
            });
    The html would be the following:

    Code:
    <div id="textFieldConfig" ext:config="{fieldLabel: 'aaa', width:300}"></div>
    <div id="myPanel"></div>
    it is the same thing than writing the following:

    Code:
            var panel = new Ext.Panel({
                layout: 'form',
                renderTo: "myPanel",
                items: [{
                    xtype: 'textfield',
                    width: 200,
                    fieldLabel: "aaa"
                }]
            });

  4. #4
    Ext JS Premium Member Foggy's Avatar
    Join Date
    Apr 2007
    Location
    Switzerland
    Posts
    477
    Vote Rating
    0
    Foggy is on a distinguished road

      0  

    Default


    Thats a nice idea...

  5. #5
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    oracle is on a distinguished road

      0  

    Default


    Update:

    - added some checking for the attribute ext:config
    - now the component's root DOM ement has two new attributes: ext:xtypes and ext:configElement

    ext:xtypes contains the xtypes of the component, so you can check easier the API documentation, without inspecting js code

    ext:configElement is the id of the element used to configure the component

    Code:
    
    Ext.Element.prototype.hasConfig = function() {
        return this.dom.attributes['ext:config']  && this.dom.attributes['ext:config'].nodeValue.length > 0 ? true : false;
    }
    
    Ext.Element.prototype.getConfig = function() {
        if(! this.hasConfig()) {
            return {};
        }
    
        var config = this.dom.attributes['ext:config'].nodeValue;
        return Ext.util.JSON.decode(config);
    }
    
    Ext.Component.prototype.initComponent = function() {
        var configEl = Ext.get(this.configElement || this.renderTo);
        
        if(! configEl || ! configEl.hasConfig()) {
            return;
        }
        
        this.configElement = configEl.id;
    
        var params = configEl.getConfig();
        Ext.apply(this, params);
        Ext.apply(this.initialConfig, params);
    }
    
    Ext.Component.prototype.afterRender = function() {
        if(! this.el || ! this.configElement) {
            return;
        }
        this.el.set({
            'ext:xtypes': this.getXTypes(),
            'ext:configElement' : this.configElement
        });
    }

  6. #6
    Ext User
    Join Date
    Aug 2007
    Posts
    6
    Vote Rating
    0
    oracle is on a distinguished road

      0  

    Default


    Update:

    - possibility to pass more than one config element for the same component
    - the config can be written both in an DOM attribute or in an external JS file

    So the following code will apply to the component before configA and then configB
    Code:
            new Ext.Panel({
                items: [{
                    xtype: 'textfield',
                    configElement: [ "configA", "configB" ]
                }]
            });
    You will be also able to include an external JS file that contains the configuration, more or less as it is a CSS file:

    Code:
    config.js:
    
    Ext.namespace("Ext.app.Config");
    
    var cfg = Ext.app.Config;
    
    cfg.configA = {
        width:200
    }
    
    cfg.configB = {
        height: 100
    }
    Here is the source

    Code:
    Ext.Element.prototype.hasConfig = function() {
        return this.dom.attributes['ext:config']  && this.dom.attributes['ext:config'].nodeValue.length > 0 ? true : false;
    }
    
    Ext.Element.prototype.getConfig = function() {
        if(! this.hasConfig()) {
            return {};
        }
    
        var config = this.dom.attributes['ext:config'].nodeValue;
        return Ext.util.JSON.decode(config);
    }
    
    Ext.namespace("Ext.app.Config");
    Ext.Component.prototype.namespace = Ext.app.Config;
    
    Ext.Component.prototype.initComponent = function() {
        var element = this.configElement || this.renderTo;
        
        var me = this;
        Ext.each(element, function(v) {
            if(Ext.app.Config[v]) {
                return me.applyConfig(Ext.app.Config[v]);
            }
    
            var configEl = Ext.get(v);
    
            if(! configEl || ! configEl.hasConfig()) {
                return;
            }
    
            if(! me.configElements) {
                me.configElements = [];
            }
            
            me.configElements.push(configEl.id);
            
            var params = configEl.getConfig();
            me.applyConfig(params);
        });
    }
    
    Ext.Component.prototype.applyConfig = function(config) {
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
    }
    
    Ext.Component.prototype.afterRender = function() {
        if(! this.el || ! this.configElements) {
            return;
        }
        this.el.set({
            'ext:xtypes': this.getXTypes(),
            'ext:configElement' : this.configElements.join(' ')
        });
    }

Thread Participants: 2

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi