sencha touch tpl 实现按钮功能

js如下：

 Ext.define('app.view.message.Info', {
     alternateClassName: 'messageInfo',
     extend: 'Ext.Container',
     xtype: 'messageInfo',
     config: {
         cls: 'info',
         scrollable: {
             direction: 'vertical',
             directionLock: true,
             indicators: false
         },
         tpl: new Ext.XTemplate(
         '<div class="title tl">{Title}</div>',
         '<div class="box sm"><div class="left">时间 {Time}</div><div>发布来源：{Auth}</div></div>',
         '<div class="box"><div class="one"></div><div>',
             '<div class="x-button btn"><span class="x-button-icon shareIco x-icon-mask" doit="11"></span></div>',
             '<div class="x-button btn"><span class="x-button-icon favorites x-icon-mask"></span></div>',
             '<div class="x-button btn"><span class="x-button-icon commentIco x-icon-mask"></span></div>',
          '</div></div>',
          '<div class="con">{Summary}</div>')
     },
     /*初始化*/
     initialize: function () {
         this.callParent();
         //添加按钮监控
         this.element.on({
             tap: 'onBtnTab',//点击后激活方法
             delegate: 'div.x-button', //这里是指div中class为x-button的对象
             scope: this
         });
     },
     onBtnTab: function (e, span) {
         //获取所需参数
         var name = span.getAttribute("doit");
         console.log(name);
     }
 });

界面效果如图，其中的按钮是利用tpl来实现的

css布局略过