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布局略过