Sencha Touch 数据层篇 Store
2011-12-07 12:49 威老 阅读(11391) 评论(3) 编辑 收藏 举报数据集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进行排序。用法大同小异,在此就不作过多的介绍了。
但是,到现在为止,我们用的仍然是静态的store,如果想要让store读取本地存储或者远程服务器的数据,又该怎么做呢?下一篇,Sencha Touch 数据层篇 之代理 中威老将为大家详解各种的数据的读取问题。敬请关注威老的博客。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步