Can't add button to tpl Dataview sencha

Question

I need to add one button inside my dataview. Please see my code below

    Ext.define("blackbutton.view.Setup.test", {
    extend: "Ext.DataView",
    xtype: 'abc',

    requires: [
        'Ext.plugin.ListPaging',
        'Ext.plugin.PullRefresh',
        'Ext.field.Search',
        'Ext.List',
        'blackbutton.store.Blue.BlueList',
        'Ext.ux.PullRefresh.PullRefreshFn',
        'blackbutton.store.Blue.BlueList_Off9'
    ],

    config: {
        title: 'Transactions',
        id: 'abc',
        store: {
            fields: ['name', 'age'],
            data: [
                {name: 'Jamie', age: 22},
                {name: 'Rob',   age: 14},
                {name: 'Tommy', age: 22},
                {name: 'Jacky', age: 16},
                {name: 'Ed',   age: 26}
            ]
        },

        itemTpl: new Ext.XTemplate(
                '<p>{name}',
                  '<tpl if="age &gt; 17">',
                  '<p>{age}</p>',
                  '<p id="{age}"></p>',
                  '</tpl>',
                '</p>'
            ),


        listeners: {
            initialize: function ()
            {
                new Ext.Button({
                    renderTo:'22'
                    , text:'Vote'
                    , width:100
                    , handler:function(){
                       alert('Vote Button is clicked');
                    }
                })
            }
        }
    }
});     

Screen shoot

The button did not appear. Btw I know I had to add <button>123<button> to itemTpl. But this is not what I want. I only want to add Ext.Button to tpl. Please give me some solution. thanks.

Answer 1

In the template, add code like following

items: [
{
    xtype: "list",
    store: "store",
    itemId:"list",
    onItemDisclosure: true,
    itemTpl:"<div class='x-button' type='test' style='border: none;'></div>"+
               "<div class=\"list-item-title\">{title}</div>"
    grouped: true,
    listeners:{
        itemtap: function(list, index, target, record, e, eOpts){
            this.up('abc').onItemTap();
        }
    }
},
onItemTap: function(target){
    try{
        var btnType = target.getTarget('div.x-button').getAttribute('type');
        if(btnType){
            this.btnClick();
        }
    }catch(e){
        alert("not a button");
        console.log(e);
    }
},
btnClick: function(){
    alert("button in tpl clicked");
}

This is not exact code. This is just a sample.