无法将按钮添加到tpl数据视图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"); 
} 

这是不准确的代码。这只是一个例子。