1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    6
    Vote Rating
    1
    Sirisian is on a distinguished road

      0  

    Default Outputting components in a tpl

    Outputting components in a tpl


    I saw this old post http://www.sencha.com/forum/showthre...l=1#post535555

    In it the author explains how to place components into a tpl by overriding the XTemplate (by placing a marker to then fill in when the template outputs). I tried that and the overwrite function was never called. I tried updating it but I can't get it to call overwrite.

    Code:
            Ext.override(Ext.XTemplate,
        {
            overwrite: function()
            {
                console.log("overwrite");
                while (this.templateComponents.length > 0)
                {
                    var el = this.templateComponents.shift();
                    if (Ext.get(el.renderTo) != null)
                    {
                        var newel = new Ext.create(el);
                    }
                }
                this.callParent();
            },
            templateComponents:[],
            addCmp: function (initConfig)
            {
                console.log("addCmp");
                var wrapperId = "temporary-" + this.templateComponents.length;
                initConfig.renderTo = wrapperId;
                this.templateComponents.push(initConfig);
                return '<div id="' + wrapperId + '"></div>';
            }
        });
    As an example of a tpl I tried:
    Code:
        <tpl for=".">
        Click here: {[ this.addCmp({xtype:"button", text:"OK"}) ]}
        </tpl>
    Does this trick still work in extjs? I'm working with a store. Simplified my component looks like this:

    Code:
    Ext.define("Timeline",
        {
                 extend: "Ext.view.View",
                         alias: "widget.timeline",
                         autoEl: "div",
                         baseCls: "timelinecontainer",
                         tpl: new Ext.XTemplate(
                             '<div class="timeline">',
                                              '<tpl for=".">',
                                                               '{[ this.addCmp({xtype:"button"}) ]}',
                                              '</tpl>',
                             '</div>')
        });

  2. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    2,468
    Vote Rating
    52
    Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about Gary Schlosberg has a spectacular aura about

      0  

    Default


    The thread to which you linked is a Touch thread, so it would seem, unfortunately, that it might never have worked in ExtJS.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    6
    Vote Rating
    1
    Sirisian is on a distinguished road

      0  

    Default


    Yeah this isn't possible. I moved the code inside of the tpl's XTemplate like:

    Code:
    tpl: new Ext.XTemplate(
        '<div class="timeline">',
            '<tpl for=".">',
                '{[ this.addCmp() ]}',
            '</tpl>',
        '</div>',
        templateComponents:[],
        addCmp: function ()
        {
        console.log("addCmp");
        var wrapperId = "temporary-" + this.templateComponents.length;
        var initConfig = {};
        initConfig.renderTo = wrapperId;
        this.templateComponents.push(initConfig);
        return '<div id="' + wrapperId + '"></div>';
    })
    then moved the overwrite code into a listener block with the refresh event and just used this.tpl like:

    Code:
    listeners:
    {
        refresh: function()
        {
            while (this.tpl.templateComponents.length > 0)
            {
                var el = this.tpl.templateComponents.shift();
                if (Ext.get(el.renderTo) != null)
                {
                    new CustomComponent({ renderTo: el.renderTo })
                }
            }
        }
    }
    Nevermind. I found another way to write this whole thing that doesn't require this nested component system.

Thread Participants: 1

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar