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
为控件添加点击事件和点击方法
sencha touch Container tpl 监听组件插件(2013-9-14)的更多相关文章
- sencha touch list tpl 监听组件插件(2013-9-15)
插件代码 /* *list tpl模版加入按钮监控 *<div class="x-button-normal x-button x-iconalign-center x-layout- ...
- waypoint+animate元素滚动监听触发插件实现页面动画效果
最近在做一个官网类型滚动加载动画,使用到waypoint监听事件插件和animate动画样式,两者结合完美实现向下滚动加载动画,但是没有做向上滚动撤消动画,留待以后有空研究 首先来介绍下jquery. ...
- Bootstrap滚动监听(Scrollspy)插件
Bootstrap滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标
- Vue中如何监听组件的原生事件
在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过thi ...
- sencha touch Container 监听超链接插件
有时候内容直接从后台获取,有可能包含超链接,打包成应用之后,点击会造成不好的后果,这样做能够用外部浏览器打开.需要Cordova支持 监听插件代码: /* *监听a标签,用外部浏览器打开链接 */ E ...
- sencha touch Container
Container控件是我们在实际开发中最常用的控件,大部分视图控件都是继承于Container控件,了解此控件能帮我们更好的了解sencha touch. layout是一个很重要的属性,能够帮助你 ...
- 12.vue属性.监听.组件
1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...
- sencha touch 2.2 为list PullRefresh插件添加refreshFn方法
sencha touch 2.2 list PullRefresh插件没有refreshFn方法 但是我们又需要他,所以需要自行扩展 代码如下 /** * 重写下拉刷新插件,以支持refreshFn事 ...
- bootstrap源码之滚动监听组件scrollspy.js详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 ...
随机推荐
- YII2 设置session过期时间
设置session过期时间 如何在YII里设置SESSION过期时间,而不需要在php.ini里面设置. 在protected/config/main.php里,设置: 代码如下 复制代码 'comp ...
- 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大小的,它的像素信息 ...
- iOS :ViewDidAppear
进入一个 UIViewController 会调用它的三个方法,分别是 viewDidLoad, viewWillAppear, viewDidAppear. 如每个方法的名字一样,在不同的方法中要处 ...
- memcached能获取所有的key吗
memcached能获取所有的key吗 Memcache 查看列出所有key方法 Memcached中获取所有的key 特别要注意:memcached保存的值需要序列化,否则是无法保存的,而且是不会报 ...
- [转]oracle awr报告生成和分析
转自:http://blog.csdn.net/cuker919/article/details/8767328 最近由于数据库cpu占用非常高,导致VCS常常自动切换,引起很多问题. 最近学习一下数 ...
- Java中级面试题及答案整理
1.webservice是什么? webservice是一种跨编程语言和跨操作系统的远程调用技术,遵循SOPA/WSDL规范. 2.springCloud是什么? springcloud是一个微服务框 ...
- 使用T4模板调用Sqlserver链接生成自己的模板
<#@ template debug="false" hostspecific="false" language="C#" #> ...
- linux中通过awk进行文本的对齐格式化处理?awk printf左对齐?
需求描述: 今天在对一个从excel文件中粘出来的内容进行整理的时候,发现格式很乱,就想用awk工具格式化一下,在此记录一下. 操作过程: 1.从excel中复制出来的内容 job_name j ...
- mysql查询两个日期之间相差多少天?
需求描述: 在mysql中,查看两个日期之间相差多少天 操作过程: 1.通过datediff函数,查看两个日期之间相差多少天 mysql> select datediff('2018-06-26 ...
- event.keyCode与event.which
//Netscape/Firefox/Opera中不支持 window.event.keyCode,需要用event.which代替//IE用event.keCode方法获取当前被按下的键盘按 ...