sencha touch Container tpl 监听组件插件(2013-9-14)

将http://www.cnblogs.com/mlzs/p/3279162.html中的功能插件化

插件代码:

 1 /*
 2 *tpl模版加入按钮
 3 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn" style="visibility:{visibility}" fire="TasteUp" ><span class="x-button-icon x-shown lower"></span></div>
 4 *fire="tasteUp" 表示添加tasteUp事件和激活dotasteUp方法
 5 *有两个参数cmp:视图本身以及doit
 6 *只要是以上格式的模板都可以被监控到
 7 *其中btn、shareIco为自定义样式，其他都是st自带样式
 8 */
 9 Ext.define('ux.ConTpl', {
10     alias: 'plugin.conTpl',
11     xtype: 'conTpl',
12     config: {
13         cmp: null,
14         //竖向滚动，不显示滚动条
15         scrollable: {
16             direction: 'vertical',
17             directionLock: true,
18             indicators: false
19         },
20         //按下时添加css
21         pressedCls: 'pressing',
22         //监控对象选择器
23         delegate: 'div.x-button'
24     },
25     constructor: function (config) {
26         this.initConfig(config);
27         this.callParent([config]);
28     },
29     //初始化
30     init: function (cmp) {
31         this.setCmp(cmp);
32     },
33     //更新配置
34     updateCmp: function (newCmp, oldCmp) {
35         if (newCmp) {
36             newCmp.element.on({
37                 tap: 'onTap',
38                 touchstart: 'onPress',
39                 touchend: 'onRelease',
40                 delegate: this.getDelegate(),
41                 scope: this
42             });
43             newCmp.setScrollable(this.getScrollable());
44         }
45     },
46     //执行动作
47     onTap: function (e) {
48         var cmp = this.getCmp(),
49         el = e.getTarget(this.getDelegate(), null, true),
50         fire = el.getAttribute('fire'),
51         action = 'do' + fire;
52         cmp.fireAction(fire, [cmp, el], action);
53     },
54     //按钮按下时，添加css
55     onPress: function (e, node) {
56         var el = e.getTarget(this.getDelegate(), null, true);
57         el.addCls(this.getPressedCls());
58     },
59     //松开按钮时，移除css
60     onRelease: function (e, node) {
61         var el = e.getTarget(this.getDelegate(), null, true);
62         el.removeCls(this.getPressedCls());
63     }
64 });

使用代码：

Ext.define('app.view.message.Info', {
    alternateClassName: 'messageInfo',
    extend: 'Ext.Container',
    xtype: 'messageInfo',
    requires: ['ux.TplBtn'],
    config: {
        cls: 'info',
        plugins: 'tplBtn',
        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" fire="showWeibo"></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>')
    },
    //分享到微博
    showWeibo: function (cmp, doit) {
        myUtil.showWeibo({ url: 'http://www.baidu.com', title: this.getData().Title });
    }
});

css略过...

效果图：

点击按钮后执行效果：

2013.9.14

　　为控件添加点击事件和点击方法