数据集store
store是数据的集合,我们称store中条数据为一条记录。store从代理(proxy)获取数据。它封装了数据的查询、筛选和排序等常用方法。然而,最重要的是,ST中的一些组件可以绑定store,这些组件会以我们设定好的格式去显示store的内容,这大概是Sencha Touch中最强大的功能了。当sotre内容发生改变时,我们能很方便地更新组件的显示,这使得我们的开发工作变得十分地轻松。
创建一个store
在这里我们先新建一个store,后面我们都会以这个store作为操作对象来讲解store的各种用法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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。方法如下:
1
2
3
4
5
|
var
list = Ext.create(
'Ext.dataview.List'
, {
itemTpl:
'{firstName} {lastName}'
,
store: store
//通过配置项实现store的绑定。
});
Ext.Viewport.add(list);
//将list显示出来
|
第二种方式是使用setStore方法进行绑定。这个方式在给已有的组件添加或修改store的时候可以用得上。调用setStore方法,List的显示内容会自动刷新。代码如下:
1
2
|
var
list = Ext.getCmp(
'myList'
);
list.setStore(store);
|
成功绑定store之后,程序的运行效果如下图:
查询
store的查询、筛选和排序功能的使用方法具有较好的一致性,下面先给大家介绍一下find方法。
find方法并不能直接把你要查询的记录直接返回,只能返回其下标,我们需要再调用一次getAt(index)方法才能获取这条记录的详细内容。
1
2
3
4
|
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的查询的需求,下面这个例子演示了如何获得符合自定义条件的记录的索引。
1
2
3
4
|
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在这一方面的功能做得也是相当强大。
1
2
|
store.filter(
'firstName'
,
'Dave'
);
//筛选出所有firstName为Dave的数据
list.setStore(store);
|
同时它也支持正则表达式:
1
2
|
store.filter(
'firstName'
, /\e$/);
//筛选出所有firstName以'e'结尾数据
list.setStore(store);
|
跟查询的findBy方法相对应,store也有一个filterBy方法用法一样,也是传一个方法作为参数进行筛选。返回为true的,视为符合条件的数据而被保留下来,返回为false的,则被除去。
1
2
3
|
store.filterBy(
function
(record){
return
record.get(
'firstName'
) ==
'Dave'
;
//仅能使方法返回true的记录会被保留下来。
});
|
也可设置多个条件同时进行筛选:
1
2
3
4
5
6
7
8
|
//筛选出所有firstName以'e'结尾并且lastName包含'a'的数据
store.filter([{
property:
'firstName'
,
value: /\e$/
},{
property:
'lastName'
,
value: /a/
}]);
|
如果你想在数据读取完毕的时候就自动筛选,那可以使用filters配置项。配置了filters之后再使用load、loadData、loadRecords等方法读取数据的话,筛选动作将会在数据读取完毕后自动执行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
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进行排序。用法大同小异,在此就不作过多的介绍了。