DataView与数据库的交互还有许多更加深入的内容，包括与数据库、PHP等的综合运用，服务端数据的增删改查等。因为目前其实还处于入门阶段，所以我们将这一块最复杂的部分先放一放，接下来进入List组件的部分。

    List组件继承了DataView的所有属性，它用于以列表等形式展示数据，是Sencha Touch中功能非常强大的一个组件。基本使用方法如下：

 launch:function(){  
 Ext.define(‘User’,{  
 extend:’Ext.data.Model’,  
 config:{  
 fields:[‘firstName’,’lastName’]  
 }  
 });  
 var store = Ext.create(‘Ext.data.Store’,{  
 model:’User’,  
 data:[  
 {firstName:’Tom’,lastName:’Black’},  
 //........  
 ]  
 });  
 var myList = Ext.create(‘Ext.List’,{  
 store:store,  
 itemTpl:’<div>{lastName}{firstName}</div>’  
 });  
 Ext.Viewport.add(myList);  
 }

从以上代码可以看出，它与DataView的用法非常相似，功能也大致相同。接下来介绍一下List中特有的方法。

    1、itemDisclosure

    List组件有一个特有的事件：itemDisclosure。该事件是专门问移动端设备定制的，使用该事件，列表中每一个列表项末尾会显示一个箭头图标，用户单机该图标时出发一个事件（就是一个可以操作每一个列表项内容或出发事件的方法）。修改定义List组件的代码如下：

 var myList = Ext.create(‘Ext.List’,{  
 store:store,  
 itemTpl:’<div>{lastName}{firstName}</div>’  
 onItemDisclosure:function(record,element,index,e){  
 //do something...  
 }  
 });

    传递的四个参数含义分别是：数据仓库中被选中的项；页面中该列表所生成的元素；被选中项的序号；被触发事件的事件对象。

    2、ListPagingView

    因为List是DataView的一个继承+扩展，因此正如普遍的这种关系一样，List组件为我们提供了大量的已经封装好的方法，比如分页。如果是在DataView中实现该功能，需要编写大量复杂的代码。但是使用List组件中的ListPagingView，可以节省大量代码量。代码修改如下：

 var myList = Ext.create(‘Ext.List’,{  
 store:store,  
 itemTpl:’<div>{lastName}{firstName}</div>’  
 plugins:[  
 {  
 xclass:’Ext.plugins.ListPaging’,  
 autoPaging:true  
 }]  
 });

    除此之外，服务器端还有部分代码，这里将在DataView深入介绍时将代码和解析一并给出。

   本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！