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

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

插件代码:

 /*
 *tpl模版加入按钮
 *<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>
 *fire="tasteUp" 表示添加tasteUp事件和激活dotasteUp方法
 *有两个参数cmp:视图本身以及doit
 *只要是以上格式的模板都可以被监控到
 *其中btn、shareIco为自定义样式，其他都是st自带样式
 */
 Ext.define('ux.ConTpl', {
     alias: 'plugin.conTpl',
     xtype: 'conTpl',
     config: {
         cmp: null,
         //竖向滚动，不显示滚动条
         scrollable: {
             direction: 'vertical',
             directionLock: true,
             indicators: false
         },
         //按下时添加css
         pressedCls: 'pressing',
         //监控对象选择器
         delegate: 'div.x-button'
     },
     constructor: function (config) {
         this.initConfig(config);
         this.callParent([config]);
     },
     //初始化
     init: function (cmp) {
         this.setCmp(cmp);
     },
     //更新配置
     updateCmp: function (newCmp, oldCmp) {
         if (newCmp) {
             newCmp.element.on({
                 tap: 'onTap',
                 touchstart: 'onPress',
                 touchend: 'onRelease',
                 delegate: this.getDelegate(),
                 scope: this
             });
             newCmp.setScrollable(this.getScrollable());
         }
     },
     //执行动作
     onTap: function (e) {
         var cmp = this.getCmp(),
         el = e.getTarget(this.getDelegate(), null, true),
         fire = el.getAttribute('fire'),
         action = 'do' + fire;
         cmp.fireAction(fire, [cmp, el], action);
     },
     //按钮按下时，添加css
     onPress: function (e, node) {
         var el = e.getTarget(this.getDelegate(), null, true);
         el.addCls(this.getPressedCls());
     },
     //松开按钮时，移除css
     onRelease: function (e, node) {
         var el = e.getTarget(this.getDelegate(), null, true);
         el.removeCls(this.getPressedCls());
     }
 });

使用代码：

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

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