Button In a Template

[BrightSoul]

The template is working, APART from the insertion of the panel.

Oops, you're right, I made a mistake. Replace this line:

wrapperId += initialConfig.id;

with this line.

wrapperId += initConfig.id;

It should work then. Or, you could use the new version of the override. It's posted below.
You see, once I was able to add components in a template, I wanted to add a whole form and all its child fields. It was doable with the previous override but the instruction would have been incredibly long since it's limited to be one-line. Now, I can also do the following:

{[ this.addCmp({id:"myform", xtype:"formpanel" }) ]}
{[ this.addCmpTo("myform", {xtype:"textfield", label:"First Name"}) ]}
{[ this.addCmpTo("myform", {xtype:"textfield", label:"Last Name"}) ]}

Basically, I added a new method addCmpTo(parentComponentId, initConfigObject) which makes it easier to append children to a previously added component. Here's the new override.

(function () {
    var originalOverwrite = Ext.XTemplate.prototype.overwrite;

    Ext.override(Ext.XTemplate, {
        overwrite: function () {
            //execute the base overwrite method
            originalOverwrite.apply(this, arguments);

            //then, render any components that addCmp might have added
            while (this.templateComponents.length > 0) {
                var el = this.templateComponents.shift();
                if (Ext.get(el.renderTo) != null) {
                    var newel = new Ext.create(el);
                }
            }
        },

        //an array to store the initialconfigs of the components-to-be
        templateComponents:[],
        templateIdCount:0,

        //Pushes an initialConfig to the array so that
        //a component can be later created and rendered.
        //It also generates a div container for the component 
        //with a random id if no id was provided
        addCmp: function (initConfig) {
            var wrapperId = "ext-comp-wrapper-";
            if (initConfig.id != void (0)) {
                wrapperId += initConfig.id;
            } else {
                //wrapperId += Math.random().toString().replace(".", "");
                wrapperId += (this.templateIdCount++).toString() + Math.random().toString().replace(".", "");
            }
            initConfig.renderTo = wrapperId;
            this.templateComponents.push(initConfig);
            //return '<div id="' + wrapperId + '"' + (initConfig.width == void(0) ? '' : ' style="width:'+ initConfig.width +'px"') + '></div>';
            return '<div id="' + wrapperId + '" class="y-wrapper"></div>';
        },

        addCmpTo: function (container, initConfig, collection) {

            if (collection == void(0)){
                this.addCmpTo(container, initConfig, this.templateComponents);
            } else {
                if (collection.length > 0){
                    for (var i=0; i<collection.length; i++){
                        if (collection[i].id == container){
                            if (collection[i].items == void(0)){
                                collection[i].items = [];
                            }
                            collection[i].items.push(initConfig);
                            break;
                        }
                        if (collection[i].items != void(0)){
                            this.addCmpTo(container, initConfig, collection[i].items);
                        }
                    } 
                }
            }

            return;
        }
    });
})();

[BrightSoul]

if there was a way to get a scope into the template so I could add handlers that point at specific callbacks on other objects. Does anyone know a good way to get a scope into the template evaluation. (in particular when used with an Ext.List).

mmh, can you please provide an example with code?

[gkatz]

is something similar going to be included in future sencha touch releases?
seems like a much needed capability...
can someone from the sencha team comment?
thanks

[AlexKorn]

The only issue I am running into is that it would be much more powerful if there was a way to get a scope into the template so I could add handlers that point at specific callbacks on other objects. Does anyone know a good way to get a scope into the template evaluation. (in particular when used with an Ext.List).

This is a bit dirty (at least in terms of abusing Templates), but you can use a closure for this:

(function() {
    // capture scope
    var me = this;
    var container = new Ext.Container({
        tpl: new Ext.XTemplate(
            '<div>',
                '{[ this.addCmp({xtype:"button", text: "Fire", handler: this.fire }) ]}',
            '</div>',
            {
                fireEvent: function() {
                    // use scope
                    me.fireEvent('eventName');
                }
            }
        )
    });
})();

BrightSoul, as others have said, this extension is awesome.

[colworx]

I'd like to use tpl variables inside my added component. Has anyone done this?

  '{[ this.addCmp({xtype:"button", text: "{text}", handler: this.fire }) ]}',

The above code renders this HTML:

<span class="x-button-label" id="ext-gen1136">',(values['text'] === undefined ? '' : values['text']),'</span>

[colworx]

I'd like to use tpl variables inside my added component. Has anyone done this?

  '{[ this.addCmp({xtype:"button", text: "{text}", handler: this.fire }) ]}',

The above code renders this HTML:

<span class="x-button-label" id="ext-gen1136">',(values['text'] === undefined ? '' : values['text']),'</span>

Oh duh... I just use the values variable like this.. documented in the XTemplate docs.

 '{[ this.addCmp({xtype:"button", text: values.prompt, handler: this.fire }) ]}',

[ForAllThat]

The code works, except.. it keeps adding the button to the first line, and not the line that I want it added to :S

Here is my template:

new Ext.XTemplate(                    '<div class="memo">',
                    '<div class="memo-type">{[this.GetWarehouseName(values.WarehouseID)]}</div>',
                    '<div class="memo-title">{ArticleName} ({Amount})</div>',
                    '<tpl if="Selected">{ArticleDescription}</tpl>',
                '</div>',
                    '{[ this.addCmp({id:"removebutton", xtype:"button", cls: "remove_title", width: "30px", height: "30px", border: 0, style: { border: "0px" }, handler: this.fireEvent}) ]}',
                     {
                        GetWarehouseName: function (id) {
                            var whrstore = Ext.StoreMgr.get('Warehouses');
                            var warehouse = whrstore.findRecord('ID', id);


                            return warehouse.get('WarehouseName');
                        },
                        fireEvent: function () {
                            console.log("FEUERRR!");
                        }
                    }

Any help with that? Also when I click the button it fires the event 7! times. Is that supposed to happen? ^^

Edit: One other thing I noticed is that when I change the Selected property of the record, the added button dissapears..

[Vital Aaron]

This is a convenient override, but I think one needs to watch out for timing issues with it. I'm displaying my button in a dataview that is redrawn whenever data in the store changes. I've found that the button doesn't always display because the wrapper hasn't been inserted in the DOC before overwrite() executes.

I put the Ext.create call inside a defer() and it worked.

Also, I had to add the xtype to the create() arguments as the first parameter. (I don't know why others haven't run into errors with the create() call. Maybe you all are using a different version of Ext than I am? I'm using 4.0 and writing a desktop app, not using Sencha Touch). Also, the 'new' is not necessary in front of the create() call.

Here's what my create call looks like now:

                var cfg = this.templateComponents.shift();
                if (Ext.get(cfg.renderTo) != null) {
                    Ext.defer(Ext.create, 1, this, [cfg.xtype, cfg]);
                }

where xtype is of the form "Ext.Button"

[hitman01]

This is a great plugin, I use it all the time. However, I constantly have an issue with itemselector since every time I put the button into my list or dataview, the button tap also triggers itemselector. Is there any way to have an exception to itemselector?

[pepperseb]

Thanks a lot Vital Aaron, I save a lot of time tkanks to the bit of code you provided.

I was struggling to implement those features in Touch 2