templatesbuttondataviewsencha-touch-2.1

Can't add button to tpl Dataview sencha


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 enter image description here

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.


Solution

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