HTML5开发移动web应用——Sencha Touch篇(11)

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深入介绍时将代码和解析一并给出。