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

    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
    9,268
    Vote Rating
    252
    Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of Gary Schlosberg has much to be proud of

      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.


    Join me at SenchaCon 2016!

  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