templates - 无法将按钮添加到 tpl Dataview sencha

Question

我需要在我的数据视图中添加一个按钮。请在下面查看我的代码

    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');
                    }
                })
            }
        }
    }
});     

屏幕截图

按钮没有出现。顺便说一句，我知道我必须添加<button>123<button>到 itemTpl。但这不是我想要的。我只想将Ext.Button添加到 tpl。请给我一些解决方案。谢谢。

Answer 1

在模板中，添加如下代码

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");
}

这不是确切的代码。这只是一个示例。