sencha touch tpl 实现按钮功能

js如下：

 1 Ext.define('app.view.message.Info', {

 2     alternateClassName: 'messageInfo',

 3     extend: 'Ext.Container',

 4     xtype: 'messageInfo',

 5     config: {

 6         cls: 'info',

 7         scrollable: {

 8             direction: 'vertical',

 9             directionLock: true,

10             indicators: false

11         },

12         tpl: new Ext.XTemplate(

13         '<div class="title tl">{Title}</div>',

14         '<div class="box sm"><div class="left">时间 {Time}</div><div>发布来源：{Auth}</div></div>',

15         '<div class="box"><div class="one"></div><div>',

16             '<div class="x-button btn"><span class="x-button-icon shareIco x-icon-mask" doit="11"></span></div>',

17             '<div class="x-button btn"><span class="x-button-icon favorites x-icon-mask"></span></div>',

18             '<div class="x-button btn"><span class="x-button-icon commentIco x-icon-mask"></span></div>',

19          '</div></div>', 

20          '<div class="con">{Summary}</div>')

21     },

22     /*初始化*/

23     initialize: function () {

24         this.callParent();

25         //添加按钮监控

26         this.element.on({

27             tap: 'onBtnTab',//点击后激活方法

28             delegate: 'div.x-button', //这里是指div中class为x-button的对象

29             scope: this

30         });

31     },

32     onBtnTab: function (e, span) {

33         //获取所需参数

34         var name = span.getAttribute("doit");

35         console.log(name);

36     }

37 });

 

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

css布局略过