HTML5开发移动web应用——Sencha Touch篇(10)

Posted fareise

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5开发移动web应用——Sencha Touch篇(10)相关的知识,希望对你有一定的参考价值。

    我们把数据可视化出来,为的就是进行一些针对数据的操作。这里介绍一下DataView的排序功能和搜索功能。掌握这两个技能,可以让写出的数据界面内的数据能够根据要求进行排序,可以进行数据的搜索显示灯功能。

    一、排序

    当我们想根据数据的某一个字段排序时,可以调用sort方法:

    store.sort(‘lastName’,’asc’);

    其中,store是我们定义好的数据仓库,调用sort方法进行排序。sort方法传入两个参数,第一个参数为按照哪个字段排序,第二个参数为升序还是降序。

如果想对多个字段进行排序,可以执行如下代码:

store.sorters.add(new Ext.util.Sorter({
property:’firstName’,
direction:’asc’
}));
store.sort();

    通过sorters.add方法可以添加多个排序条件,最后调用sort()方法,执行排序的先后顺序按照添加顺序决定。

我们可以在界面中定义一个选项框,根据用户的选项进行排序,通过为每一个选项设定value值,将value值传入sort方法中,按照要求进行排序。

 

    二、搜索

    DataView中有对数据仓库中数据进行过滤的方法,代码如下:

    store.filter(‘lastName’,’Tom’);

    这句话就表示筛选出这样的数据,它的lastName属性值为Tom。同理,如果我们想实现用户的查找功能,定义一个搜索框,将用户输入的要搜索的值传入filter函数中即可。 还可以按照多个过滤条件先后进行过滤(这里要多个筛选时间都成立的数据才会被选出来)。注意,在每一次执行搜索操作前,一定要执行搜索清除操作:

    store.clearFilter();

    这就保证每次搜索时都没有上一次搜索的干扰。如果不清楚的话,显示的内容是多次搜索结果的交集(很可能就没有结果)。

 

以上是关于HTML5开发移动web应用——Sencha Touch篇(10)的主要内容,如果未能解决你的问题,请参考以下文章

HTML5开发移动web应用——Sencha Touch篇(12)

HTML5开发移动web应用——Sencha Touch篇(10)

HTML5开发实战——Sencha Touch篇

Sencha Touch实战OA系统开发|Sencha Touch项目教程

Sencha Architect怎么样

浅谈移动应用的跨平台开发工具(Xamarin和React Native)