插件代码
1 /* 2 *list tpl模版加入按钮监控 3 *<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn"><span class="x-button-icon x-shown lower" fire="showWeibo"></span></div> 4 *fire="showWeibo" 作用是激活指定事件 5 *有两个参数cmp:视图本身以及doit 6 *只要是以上格式的模板都可以被监控到 7 *其中btn、lower为自定义样式，其他都是st自带样式 8 */ 9 Ext.define('ux.ListTpl', { 10 alias: 'plugin.ListTpl', 11 xtype: 'listTpl', 12 config: { 13 list: null, 14 //按下时添加css 15 pressedCls: 'pressing', 16 //监控对象选择器 17 delegate: 'div.x-button', 18 //是否监听input控件 19 isInput: false 20 }, 21 constructor: function (config) { 22 this.initConfig(config); 23 this.callParent([config]); 24 }, 25 //初始化 26 init: function (list) { 27 this.setList(list); 28 }, 29 //更新配置 30 updateList: function (newList, oldList) { 31 if (newList) { 32 //为自定义按钮注册点击事件 33 newList.container.element.on({ 34 tap: 'onTap', 35 touchstart: 'onPress', 36 touchend: 'onRelease', 37 delegate: this.getDelegate(), 38 scope: this 39 }); 40 if (this.getIsInput()) { 41 //为自定义按钮注册点击事件 42 newList.container.element.on({ 43 blur: 'onBlur', 44 delegate: 'input[type="text"]', 45 scope: this 46 }); 47 } 48 49 } 50 }, 51 //执行动作 52 onTap: function (e) { 53 var me = this.getList(), 54 item = Ext.getCmp(Ext.get(e.getTarget()).up('.x-list-item').id), 55 index = item.$dataIndex, 56 record = me.getStore().getAt(index), 57 el = e.getTarget(this.getDelegate(), null, true), 58 fire = el.getAttribute('fire'), 59 action = 'do' + fire; 60 me.fireAction(fire, [me, record, item, index, el], action); 61 }, 62 //按钮按下时，添加css 63 onPress: function (e, node) { 64 var el = e.getTarget(this.getDelegate(), null, true); 65 el.addCls(this.getPressedCls()); 66 }, 67 //按钮松开时，移除css 68 onRelease: function (e, node) { 69 var el = e.getTarget(this.getDelegate(), null, true); 70 el.removeCls(this.getPressedCls()); 71 }, 72 //焦点离开时，将值填充到store中 73 onBlur: function (e) { 74 var me = this.getList(), 75 item = Ext.getCmp(Ext.get(e.getTarget()).up('.x-list-item').id), 76 index = item.$dataIndex, 77 record = me.getStore().getAt(index), 78 el = e.getTarget('input', null, true), 79 value = el.getValue(), 80 name = el.getAttribute('name'); 81 record.data[name] = value; 82 } 83 });
使用代码：
1 Ext.define('app.view.eatery.Shop', { 2 alternateClassName: 'eateryShop', 3 extend: 'Ext.List', 4 xtype: 'eateryShop', 5 requires: ['ux.ListTpl'], 6 config: { 7 cls: 'list', 8 plugins: [{ 9 xtype: 'listTpl', 10 isInput: true 11 }], 12 title: '购物车', 13 btmBar: 'eateryBar', 14 isNoHide: true, 15 scrollToTopOnRefresh: false, 16 itemTpl: new Ext.XTemplate( 17 '<div class="bh">', 18 '<div class="bone">{name}</div>', 19 '<div class="bh">', 20 '<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn" style="visibility:{visibility}" fire="onTasteUp" value="-1"><span class="x-button-icon x-shown lower"></span></div>', 21 '{taste}', 22 '<div class="x-button-normal x-button x-iconalign-center x-layout-box-item x-stretched btn" fire="onTasteUp" value="1"><span class="x-button-icon x-shown add"></span></div>', 23 '</div>', 24 '</div>', 25 '<div>{price}</div>', 26 '<div>备注：<input type="text" name="description" value="{description}"/></div>'), 27 store: 'shopList', 28 selectedCls: '', 29 pressedCls: '' 30 } 31 });
监听代码：
1 eateryList: { 2 onTasteUp: function (list, index, record, btn) { 3 var visibility = 'visible', 4 value = +btn.getAttribute("value"), 5 taste = record.data.taste + value; 6 if (taste == 0) { 7 visibility = 'hidden'; 8 } 9 record.set({ taste: taste, visibility: visibility }); 10 } 11 }
效果图：
2013.9.15
优化代码，参考list源码书写。为控件添加点击事件和点击方法,不再触发list默认单击事件
添加了对输入框的支持，可自动将输入框中的值填充到数据源中