Sencha Touch 数据层篇 Store

数据集store

store是数据的集合，我们称store中条数据为一条记录。store从代理(proxy)获取数据。它封装了数据的查询、筛选和排序等常用方法。然而，最重要的是，ST中的一些组件可以绑定store，这些组件会以我们设定好的格式去显示store的内容，这大概是Sencha Touch中最强大的功能了。当sotre内容发生改变时，我们能很方便地更新组件的显示，这使得我们的开发工作变得十分地轻松。

创建一个store

在这里我们先新建一个store，后面我们都会以这个store作为操作对象来讲解store的各种用法：

Ext.regModel('Contact', {
	fields: ['firstName', 'lastName']
});

var store = Ext.create('Ext.data.Store', {
	model: 'Contact',//Store创建的时候会根据模型，对数据进行加工处理。
	data: [		//直接把数组作为数据配置项。这些数据会被加工处理，最终形成record数组。
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Dave', lastName: 'Conran'},
        {firstName: 'Michael', lastName: 'Mullany'},
        {firstName: 'Abraham', lastName: 'Elias'},
        {firstName: 'Jay', lastName: 'Robinson'},
        {firstName: 'Tommy', lastName: 'Maintz'},
        {firstName: 'Ed', lastName: 'Spencer'},
        {firstName: 'Jamie', lastName: 'Avins'},
        {firstName: 'Aaron', lastName: 'Conran'},
        {firstName: 'Ape', lastName: 'Evilias'},
        {firstName: 'Dave', lastName: 'Kaneda'}
	]
});

绑定store

绑定store有两种方式，这里我以List为例进行绑定，其他组件的绑定方式也一样。第一种是通过组件的配置项作绑定，也就是在实例化组件的时候，将store作为配置项，配置给List。方法如下：

var list = Ext.create('Ext.dataview.List', {
	itemTpl: '{firstName} {lastName}',
	store: store //通过配置项实现store的绑定。
});
Ext.Viewport.add(list);//将list显示出来

第二种方式是使用setStore方法进行绑定。这个方式在给已有的组件添加或修改store的时候可以用得上。调用setStore方法，List的显示内容会自动刷新。代码如下：

var list = Ext.getCmp('myList');
list.setStore(store);

成功绑定store之后，程序的运行效果如下图：

查询

store的查询、筛选和排序功能的使用方法具有较好的一致性，下面先给大家介绍一下find方法。

find方法并不能直接把你要查询的记录直接返回，只能返回其下标，我们需要再调用一次getAt(index)方法才能获取这条记录的详细内容。

var index = store.find('firstName', 'Dave');
console.log(index);	//Dave第一次出现是在第5条记录，下标为4，输出4。
var record = store.getAt(index);
console.log(record);	//输出的是一条Dave的那条record。

find方法并非精确匹配，它只匹配记录的头部。在上面的例子中，“Daven”也是符合查询条件的。如果想要精确匹配，就用findExact方法，用法跟find方法一样。如果你的查询条件比较复杂，还可以考虑一下如下的findBy方法。

给定一个自定义的判定方法，findBy基本可以处理任何BT的查询的需求，下面这个例子演示了如何获得符合自定义条件的记录的索引。

var index = store.findBy(function(record){
	return record.get('firstName') == 'Dave' && record.get('lastName') == 'Kaneda';
});
console.log(index);//Dave Kaneda第一次出现是在第14条记录，下标为13，输出13。

筛选

筛选功能，顾名思义，就是去掉不符合条件的数据，只留下符合我们要求的。这也是一个常用的功能，当然Sencha Touch在这一方面的功能做得也是相当强大。

store.filter('firstName', 'Dave');//筛选出所有firstName为Dave的数据
list.setStore(store);

同时它也支持正则表达式：

store.filter('firstName', /\e$/);//筛选出所有firstName以'e'结尾数据
list.setStore(store);

跟查询的findBy方法相对应，store也有一个filterBy方法用法一样，也是传一个方法作为参数进行筛选。返回为true的，视为符合条件的数据而被保留下来，返回为false的，则被除去。

store.filterBy(function(record){
    return record.get('firstName') == 'Dave';//仅能使方法返回true的记录会被保留下来。
});

也可设置多个条件同时进行筛选：

//筛选出所有firstName以'e'结尾并且lastName包含'a'的数据
store.filter([{
    property: 'firstName',
    value: /\e$/
},{
    property: 'lastName',
    value: /a/
}]);

如果你想在数据读取完毕的时候就自动筛选，那可以使用filters配置项。配置了filters之后再使用load、loadData、loadRecords等方法读取数据的话，筛选动作将会在数据读取完毕后自动执行。

var data = [
    {firstName: 'Tommy', lastName: 'Maintz'},
    {firstName: 'Ed', lastName: 'Spencer'},
    {firstName: 'Jamie', lastName: 'Avins'},
    {firstName: 'Aaron', lastName: 'Conran'},
    {firstName: 'Dave', lastName: 'Conran'},
    {firstName: 'Michael', lastName: 'Mullany'},
    {firstName: 'Abraham', lastName: 'Elias'},
    {firstName: 'Jay', lastName: 'Robinson'},
    {firstName: 'Tommy', lastName: 'Maintz'},
    {firstName: 'Ed', lastName: 'Spencer'},
    {firstName: 'Jamie', lastName: 'Avins'},
    {firstName: 'Aaron', lastName: 'Conran'},
    {firstName: 'Ape', lastName: 'Evilias'},
    {firstName: 'Dave', lastName: 'Kaneda'}
];
var store = Ext.create('Ext.data.Store', {
    model: 'Contact',
    //刚开始store里没有数据
    filters: {
        property:'firstName',
        value: 'Dave'
    }
});		
store.loadData(data);//使用loadData读取数据，此时会自动执行筛选操作。
var list = Ext.create('Ext.dataview.List', {
    itemTpl: '{firstName} {lastName}',
    store: store//结果list显示了Dave Conran以及Dave Kaneda这两条数据。
});

除此之外，还有soter方法，以及soters配置项，用于对store进行排序。用法大同小异，在此就不作过多的介绍了。

但是，到现在为止，我们用的仍然是静态的store，如果想要让store读取本地存储或者远程服务器的数据，又该怎么做呢？下一篇，Sencha Touch 数据层篇 之代理 中威老将为大家详解各种的数据的读取问题。敬请关注威老的博客。