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

posted @ 2013-09-01 16:04  魔狼再世  阅读(1865)  评论(0)  编辑  收藏  举报