Button In a Template

[hitman01]

Is it possible to add a Sencha button into a template?

[hitman01]

Will renderTpl work somehow?

[tomalex0]

                xtype:'dataview',
		scroll:false,
		singleSelect: true,
                itemSelector: 'div.testbutton',
		store:  teststore,
		tpl: new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="testbutton" id="renderbutton"></div>',
                        '</tpl>'),
                listeners:{
                    afterrender:function(){
                            new Ext.Button({
					text:'Button',
					ui:'action',
					renderTo:'renderbutton'
				});
                    }
               }

This may come handy for rendering button in Templates.

[hitman01]

Thank you, I think thats what I'm looking for.

[BrightSoul]

Hello, I had a similar need for inserting a component inside a template. I can't use the proposed solution though since my templates are in separate files and I don't like much the idea of having parts of the template in a file and other parts (the components) somewhere else.

I came up with an override of XTemplate that allows me to do the following:

<tpl for=".">
Click here: {[ this.addCmp({xtype:"button", text:"OK"}) ]}
</tpl>

Here's the code for the 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:[],

        //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 += initialConfig.id;
            } else {
                wrapperId += Math.random().toString().replace(".", "");
            }
            initConfig.renderTo = wrapperId;
            this.templateComponents.push(initConfig);
            return '<div id="' + wrapperId + '"></div>';
        }
    });
})();

You can insert any component but be aware of a few restrictions:

• Lazy instantiation must be used and an xtype must be provided;
• Always use double quotes (e.g xtype:"button"), cause single quotes don't work and Sencha 0.98 will throw an "Unexpected identifier" error;
• The whole instruction must be on a single line, you'll get an error otherwise;
• Watch out when you mix square and curly brackets, the template parser might get confused (eg. {xtype:"tabpanel", items:[{title:"Tab1"}]} ). Just add a space to avoid confusion. (eg. {xtype:"tabpanel", items:[{title:"Tab1"}]<spaceHere>} )

May I suggest something similar to be added in a future version of Sencha? Or is there already a simpler way to do this?

[sosy]

@Brightsoul, well i implanted it and the button is rendered, i did not find another way to handle this untill now.

But there is a slight problem for me, i would like to know an item id, but cant pass the data to an handler.

I am using it in an dataview, and i want 2 buttons, one for showing details, one to add the item to an store.

var dataview = new Ext.DataView({
    store: itemStore,
       tpl  : new Ext.XTemplate(
        '<ul>',
            '<tpl for=".">',
                '<li class="phone" id="itemID{id}" >',
                    '<div class="itemPic" id="boxPic{id}" onclick="onPic({id})">',
                    '<img width="64" height="64" src="images/phones/{code}.png" />',
                    '</div>',
                    '<div class="itemText">',
                        '<strong>{name}</strong>',
                    '</div>',
                    '<div class="itemPrice">',
                        '<span>{price} &euro;</span>',
                    '</div>',
                    '{[ this.addCmp({xtype:"button", text:"OK", handler:function fn(){ alert("okay") } }) ]}',
                '</li>',
            '</tpl>',
        '</ul>'
    )

The alert("okay") is working just fine, if i put an +id alert("okay "+id) to it, it will pass me the ext-gen id, if i put an
this.id i will see the id of the template.

So now i would like to pass the id of the item, passed by the store.

And i cant find a way to get this. If i try an alert("okay "+{id}) it throws an error:

missing ) after argument list

So now i am stucked, has anyone an solution???

Regards
Sosy

[abierbaum]

This is an awesome extension. I wish it was part of the toolkit proper.

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).

Once again, great extension.