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

作者: fareise
原文: http://blog.csdn.net/fareise/article/details/50644912