1. #1
    Sencha User
    Join Date
    Jul 2013
    Posts
    7
    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
    5,352
    Vote Rating
    113
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      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 human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User
    Join Date
    Jul 2013
    Posts
    7
    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