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

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