我们把数据可视化出来,为的就是进行一些针对数据的操作。

这里介绍一下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)的更多相关文章

  1. HTML5开发移动web应用——Sencha Touch篇(7)

    Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...

  2. HTML5开发移动web应用——Sencha Touch篇(8)

    DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...

  3. HTML5开发移动web应用——SAP UI5篇(6)

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  4. HTML5开发移动web应用——SAP UI5篇(8)

    本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...

  5. HTML5开发移动web应用——SAP UI5篇(7)

    SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...

  6. HTML5开发移动web应用——SAP UI5篇(9)

    之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...

  7. HTML5开发实战——Sencha Touch篇(1)

    学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...

  8. html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载

    <Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...

  9. HTML5开发移动web应用—JQuery Mobile(1)

    JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...

随机推荐

  1. django 实现自定义认证

    1.Django自带用户认证系统 Django自带用户认证系统,这个系统支持访问控制.注册用户.关联创建者和内容等:在开发用户认证功能时的时候,可以使用Django自带用户认证系统实现: A.相关表 ...

  2. 【转】jenkins插件pipeline使用介绍

    摘要: pipeline字面意思就是流水线,将很多步骤按顺序排列好,做完一个执行下一个.下面简单介绍下如何使用该插件帮我们完成一些流水线型的任务 pipeline字面意思就是流水线,将很多步骤按顺序排 ...

  3. E - A strange lift 【数值型BFS+上下方向】

    There is a strange lift.The lift can stop can at every floor as you want, and there is a number Ki(0 ...

  4. SPOJ CIRU - The area of the union of circles (圆的面积并)

    CIRU - The area of the union of circles no tags  You are given N circles and expected to calculate t ...

  5. Xamarin XAML语言教程基本视图ContentViewg构架范围框架

    Xamarin XAML语言教程基本视图ContentViewg构架范围框架 ContentView视图基本上有三个作用,下面依次介绍. (1)范围框架:ContentView视图可以构建一个范围框架 ...

  6. [xsy1140]求值

    $\newcommand{ali}[1]{\begin{align*}#1\end{align*}}$题意:给定$n,b,c,d,e,a_{0\cdots n-1}$,令$x_k=bc^{4k}+dc ...

  7. 【dfs序】【set】bzoj3991 [Sdoi2015]寻宝游戏

    在考试代码的基础上稍微改改就a了……当时为什么不稍微多想想…… 插入/删除一个新节点时就把其dfn插入set/从set中删除. 当前的答案就是dfn上相邻的两两节点的距离和,再加上首尾节点的距离. 比 ...

  8. 三星s3c24xx平台GPIO操作详解

    转:http://blog.chinaunix.net/uid-22030783-id-3391515.html 先介绍三星S3C24XX平台BSP中定义外设寄存器和GPIO的相关头文件 以linux ...

  9. UI控件---UIWebView

    UIWebView是内置浏览器控件,可以用来浏览网页,文档等,今天就试着做一个简易的浏览器! 定义url的初始化方法和返回,前进,刷新三个方法,实现UIWebViewDelegate协议 @inter ...

  10. 页面自动适应大小&&获取页面的大小

    直接上代码: <script type="text/JavaScript"> var size = 1.0; function showheight() { alert ...