【IT168技术】在上一篇文章中(http://publish.itpub.net/a2011/0708/1215/000001215353.shtml), 我们介绍了移动跨平台开发框架Sencha Touch的基本特性,并开始指导大家如何使用Sencha Touch开发一个简单的记事应用,其中讲解了记事页面列表的界面开发和代码。在本文中，将继续讲解如何完善这个记事应用中的记事列表界面的功能。在本文中，期望在学习完后，将会实现第一讲中如下的界面框架，如下图所示：
▲界面框架
下面我们分步来进行开发。
在Sencha Touch中创建数据模型
在创建记事列表前，必须先创建记事的数据模型，这个可以使用Sencha Touch中的Ext.regModel()方法实现，代码如下：
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'narrative', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title' }
]
});
在记事的数据模型中，这里定义了其名称为”Note”,idPropoerty属性则指定了数据模型的编号列，fileds属性是个集合，其中指定了记事这个实体的四个属性，并且用type指定了它们的类型。注意在数据模型中，validations则指定了校验的规则，这里指定了id和title两个属性是必须填写的，在稍后的新增记事的界面中，则会看到校验规则是如何起作用的。
要注意的是，Sencha Touch中的数据模型，可以象Hibernate一样，可以跟其他创建的更多的实体模型构成关联关系，比如一对一，一对多等，由于在本文中不存在这样的关系，所以我们并没有演示，但强烈建议读者阅读Sencha Touch的文档中的相关部分。
使用HTML 5本地存储机制保存用户本地的数据
我们需要将数据存放起来，而Ext.regStore()可以很好地创建数据本地存储，将数据保存起来，代码如下：
model: 'Note',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'notes-app-localstore'
}
});
其中，我们通过model属性，指定了要保存的实体为刚建立的Note，并使用sorters指定了存储的数据中，要根据date日期字段进行倒序排列。在proxy属性中，实际上是生成了Ext.data.LocalStorageProxy的一个实例。Ext.data.LocalStorageProxy(可参考：
http://dev.sencha.com/deploy/touch/docs/?class=Ext.data.LocalStorageProxy)，实际上包装了HTML5中新的本地存储机制API，可以在客户端的浏览器中保存数据，当然保存的数据不可能太复杂，Ext.data.LocalStorageProxy能负责对这些数据进行序列化和反序列化。
