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篇(7)
Sencha Touch中的Ext.DomHelper组件能够方便的实现对元素的追加或重写操作 演示样例: launch:function(){ function appendDom(){ Ext.D ...
- HTML5开发移动web应用——Sencha Touch篇(8)
DataView是Sencha Touch中最重要的组件,用于数据的可视化.数据可视化的重要性不言而喻,能够讲不论什么数据以形象的方式展示给用户. 眼下,怎样更好地可视化是很多公司或框架都在追求的. ...
- HTML5开发移动web应用——SAP UI5篇(6)
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- HTML5开发移动web应用——SAP UI5篇(8)
本次对之前学习的SAP UI5框架知识进行简单小结.以及重点部分知识的梳理. 1.在UI5使用过程中,命名空间的概念非常重要. 2.一般的sap组件引用格式例如以下: sap.ui.define([ ...
- HTML5开发移动web应用——SAP UI5篇(7)
SAPUI5中支持利用Component对组件进行封装.想封装一个组件,Component的基本代码例如以下: sap.ui.define([ "sap/ui/core/UIComponen ...
- HTML5开发移动web应用——SAP UI5篇(9)
之前我们对于app的构建都是基于显示的.如今我们来格式化一下,引入很多其它的SAP UI5组件概念.这使得APP的一个界面更有层次性.更像是一个手机应用的界面,而且更好地使用SAP UI5中提供的功能 ...
- HTML5开发实战——Sencha Touch篇(1)
学习了很多主要的Sencha Touch内容,已经了解了Sencha Touch的开发模式.接下来一段时间我们将利用Sencha Touch来进行自己的web应用构建. 先要解决的是前端的问题.从最简 ...
- html5外包—长年承接html5外包业务:《Sencha Touch权威指南》下载
<Sencha Touch权威指南>内容简介:如何才能全面而透彻地理解和掌握移动应用开发框架Sencha Touch并开发出令人心动的移动应用?<Sencha Touch权威指南&g ...
- HTML5开发移动web应用—JQuery Mobile(1)
JQuery Mobile是一个简单易用的web移动app开发框架.使用它就像使用jQuery一样,引入必要的文件就可以. 最基础的jQuery Mobile文件的结构代码例如以下: <body ...
随机推荐
- iOS运行时,如何增加成员变量
必须实现getter和setter方法 ``` - (void)setName:(NSString *)name { /** * 为某个类关联某个对象 * * @param object#> 要 ...
- HTTP 协议基本知识
HTTP协议 7.1.什么是HTTP协议: HTTP协议是用来规定浏览器客户端和服务器通信的方式 7.2.基本原则 基于请求响应模型 一次请求对应一次响 ...
- ubuntu下配置ProFtpd服务使用sqlite3作为后端用户认证
个人机器需要开个文件共享,Linux机器懒得配置SMB,就直接安装了ProFtpd,以做FTP服务器 Ubuntu安装挺简单,可使用就不那么友好了,配合GAdmin-Proftpd,一样不好用. 首先 ...
- [bootstrap] 修改字体
file: variable.less @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-seri ...
- python数据转换工具Into
转:http://python.jobbole.com/81564/ 再次介绍Into包:整洁地数据迁移 2015/03/12 · 基础知识 · into, 数据迁移 分享到:3 本文由 伯乐在线 ...
- Java学习之路(书籍推荐)
一.基础类 1.<Thinking in java>(阅读2遍),入门第一位是建立正确的概念 2.<Core Java>这本书更贴近实践,更多API的介绍,同样,更新也更频繁. ...
- window下安装rsyncServer
window下安装rsyncServer---------------------------------1. 解压cwRsyncServer_4.0.5_Installer.zip,安装. 2. 复 ...
- Express下使用formidable实现POST表单上传文件并保存
Express下使用formidable实现POST表单上传文件并保存 在上一篇文章中使用formidable实现了上传文件,但没将它保存下来. 一开始,我也以为是只得到了文件的相关信息,需要用fs. ...
- Android中的MVC,MVP和MVVM
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha MVC,MVP,MVVM的区别 #MVC 软件可以分为三部分 视图(View):用户界面 ...
- [BZOJ 2817] 波浪
Link: BZOJ 2817 传送门 Solution: 算是比较神的DP了吧, 首先这个绝对值处理起来很难受,肯定要想办法去掉 于是想到从小到大插入的方式,便不存在绝对值的问题了 插入一个数只有5 ...