投放本站广告请联系:
extjscn#126.com
Sencha Touch 自定义List的两种实现方案
sencha touch的list里嵌入自己想要的控件,有多种选择方案。
其中一种是直接在tpl上加上html标签(如<button> <input>)创建html控件。效果如下:
蛋疼了吧。。。风格不统一,而且要给按钮加事件也显得比较别扭。这个方案,当然还是有它的好处的,这是所有方案中效率最高的一个。
如果你使用的是图片按钮,自然也是可以很协调的。
如果我们想要用框架原有的按钮怎么办,这就是本篇文章的重点了。
第二种方案
先看效果
这个方案,要求你对Sencha Touch框架有一定程度的了解,当然,学习它也能让你对这个框架有更深一层的认识。
废话不说直接上代码。
list示例 Ext.regModel('Example',{ fields:['id','text'] }); Ext.regStore('MyStore',{ model :'Example', data:[ {id : '0', text : 'aaaa'}, {id : '1', text : 'bbbb'}, {id : '2', text : 'cccc'}, {id : '3', text : 'dddd'} ] }); var myApp = new Ext.Application({ //利用框架的Application类的构造函数构造一个应用 name: 'myApp', //为这个应用指定名称 //useLoadMask: true, launch: function () { //这是程序的入口 var list = new Ext.List({ itemTpl : new Ext.XTemplate( '<div>{text}</div>', '<div style="float:right" id="button_{id}"></div>'),//这里的id让后面可以找到这个div并将按钮渲染到这个div中 store : 'MyStore', isAfterrendered : false, //添加一个变量,用于检测afterrender是否已经发生 listeners : { afterrender : function() { //afterrender事件只有list首次载入的时候才会触发。 this.isAfterrendered = true; //这个this是指list console.log('afterrender'); //请在调试状态下查看事件发生的顺序 }, update : function() { //update事件在render(渲染)之前执行一次,渲染完毕 //后又会执行一次。以后在list内容发生改变时执行。 console.log('update'); if (this.isAfterrendered) { Ext.each(Ext.StoreMgr.lookup('MyStore').data.items,//对MyStore的每一条数据执行一次循环 function(arrayItem, index) { new Ext.Button({ iconMask : true, ui : 'plain', //按钮背景透明 iconCls : 'delete', renderTo : 'button_' + arrayItem.data.id }); }); } } } }); var panel = new Ext.Panel({ fullscreen : true, //设为全屏就会显示出来 items : list }); } });
该说的在注释里头都说了,就这样吧。
所有的控件都可以用过来,很好地保持了风格的统一,而且添加按钮事件也比较方便。
但是这样做因为需要额外的渲染,效率明显不如第一个方案。
作者:威老
原文:http://www.cnblogs.com/weilao/archive/2011/08/04/2126962.html
- 关键字:
- 要发表评论,请先登录