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. });

使用代码:

  1. Ext.define('app.view.message.Info', {
  2. alternateClassName: 'messageInfo',
  3. extend: 'Ext.Container',
  4. xtype: 'messageInfo',
  5. requires: ['ux.TplBtn'],
  6. config: {
  7. cls: 'info',
  8. plugins: 'tplBtn',
  9. tpl: new Ext.XTemplate(
  10. '<div class="title tl">{Title}</div>',
  11. '<div class="box sm"><div class="left">时间 {Time}</div><div>发布来源:{Auth}</div></div>',
  12. '<div class="box"><div class="one"></div><div>',
  13. '<div class="x-button btn"><span class="x-button-icon shareIco x-icon-mask" fire="showWeibo"></span></div>',
  14. '<div class="x-button btn"><span class="x-button-icon favorites x-icon-mask"></span></div>',
  15. '<div class="x-button btn"><span class="x-button-icon commentIco x-icon-mask"></span></div>',
  16. '</div></div>',
  17. '<div class="con">{Summary}</div>')
  18. },
  19. //分享到微博
  20. showWeibo: function (cmp, doit) {
  21. myUtil.showWeibo({ url: 'http://www.baidu.com', title: this.getData().Title });
  22. }
  23. });

css略过...

效果图:

点击按钮后执行效果:

2013.9.14

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

sencha touch Container tpl 监听组件插件(2013-9-14)的更多相关文章

  1. sencha touch list tpl 监听组件插件(2013-9-15)

    插件代码 /* *list tpl模版加入按钮监控 *<div class="x-button-normal x-button x-iconalign-center x-layout- ...

  2. waypoint+animate元素滚动监听触发插件实现页面动画效果

    最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...

  3. Bootstrap滚动监听(Scrollspy)插件

    Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标

  4. Vue中如何监听组件的原生事件

    在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...

  5. sencha touch Container 监听超链接插件

    有时候内容直接从后台获取,有可能包含超链接,打包成应用之后,点击会造成不好的后果,这样做能够用外部浏览器打开.需要Cordova支持 监听插件代码: /* *监听a标签,用外部浏览器打开链接 */ E ...

  6. sencha touch Container

    Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch. layout是一个很重要的属性,能够帮助你 ...

  7. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

  8. sencha touch 2.2 为list PullRefresh插件添加refreshFn方法

    sencha touch 2.2 list PullRefresh插件没有refreshFn方法 但是我们又需要他,所以需要自行扩展 代码如下 /** * 重写下拉刷新插件,以支持refreshFn事 ...

  9. bootstrap源码之滚动监听组件scrollspy.js详解

    其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...

随机推荐

  1. YII2 设置session过期时间

    设置session过期时间 如何在YII里设置SESSION过期时间,而不需要在php.ini里面设置. 在protected/config/main.php里,设置: 代码如下 复制代码 'comp ...

  2. TensorFlow:tf.reduce_mean(input_tensor, axis=None, keep_dims=False, name=None, reduction_indices=None)

    转载:https://www.cnblogs.com/yuzhuwei/p/6986171.html 1.概述 在深度学习里研究的物体的关系,都是比较复杂的.比如一个图片32X32大小的,它的像素信息 ...

  3. iOS :ViewDidAppear

    进入一个 UIViewController 会调用它的三个方法,分别是 viewDidLoad, viewWillAppear, viewDidAppear. 如每个方法的名字一样,在不同的方法中要处 ...

  4. memcached能获取所有的key吗

    memcached能获取所有的key吗 Memcache 查看列出所有key方法 Memcached中获取所有的key 特别要注意:memcached保存的值需要序列化,否则是无法保存的,而且是不会报 ...

  5. [转]oracle awr报告生成和分析

    转自:http://blog.csdn.net/cuker919/article/details/8767328 最近由于数据库cpu占用非常高,导致VCS常常自动切换,引起很多问题. 最近学习一下数 ...

  6. Java中级面试题及答案整理

    1.webservice是什么? webservice是一种跨编程语言和跨操作系统的远程调用技术,遵循SOPA/WSDL规范. 2.springCloud是什么? springcloud是一个微服务框 ...

  7. 使用T4模板调用Sqlserver链接生成自己的模板

    <#@ template debug="false" hostspecific="false" language="C#" #> ...

  8. linux中通过awk进行文本的对齐格式化处理?awk printf左对齐?

    需求描述: 今天在对一个从excel文件中粘出来的内容进行整理的时候,发现格式很乱,就想用awk工具格式化一下,在此记录一下. 操作过程: 1.从excel中复制出来的内容 job_name    j ...

  9. mysql查询两个日期之间相差多少天?

    需求描述: 在mysql中,查看两个日期之间相差多少天 操作过程: 1.通过datediff函数,查看两个日期之间相差多少天 mysql> select datediff('2018-06-26 ...

  10. event.keyCode与event.which

        //Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替//IE用event.keCode方法获取当前被按下的键盘按 ...