[Phonegap+Sencha Touch] 移动开发8、store和proxy

2024-01-28 11:58

本文主要是介绍[Phonegap+Sencha Touch] 移动开发8、store和proxy,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

上图是一个支持服务端分页、服务端排序、和服务端过滤的一个store的配置。

一、store
常用的配置参数:
1、autoLoad:Boolean, 表示创建store之后是否立即加载数据,默认false。
因为我们要等到view显示的时候,手动去调用store.load()方法,加载数据

2、autoSync:Boolean, 对store数据的变更(增删改查),是否立即保存,默认false

3、sorters:Array, 排序规则的集合,是一个数组,可以有多个(数组里的每个元素最后都被转换成了Ext.util.Sorter的实例)。写法如:
        sorters: [{
            property: "RequestDate",
            direction: "DESC"
        }]
        或者
        sorters: [Ext.create('Ext.util.Sorter', {
            property: "RequestDate",
            direction: "DESC"
        })]

     Ext.util.Sorter的配置项:
     常用的有
     (1) property:String, 排序的字段;
     (2) direction:String, 排序方向,可选值'ASC', 'DESC';
     还有
     (3) id:为每个排序规则指定一个id;
     (4) sorterFn:Function, 特殊指定一个排序的方法,而不按照property指定的字段来排序。比如有个字段OpDateTime,我不想按照property: OpDateTime排序,而想要格式化成'Y-m-d'之后再排序,此时就应该用sorterFn;
     (5) root:String, 意思就是property是来自record的哪里的。默认值是null,也可以配置为'data',也就是默认排序的字段是record.data里面的;

4、groupField:String, 分组的字段

5、groupDir:String, 分组之间的排序方向,'ASC'(默认)或'DESC'

6、grouper:Object, 即分组排序。
     使用分组功能,需要把用到这个store的dataview控件的grouped设为true。grouper 和 groupField & groupDir 只需要指定一种
     (grouper这个配置最后被转换成为Ext.util.Grouper的实例)     
     Ext.util.Grouper继承自Ext.util.Sorter。所以,grouper也是一个sorter,grouper有sorter的属性。
     (1) property:String, 分组的字段,是分组的依据;
     (2) direction:String, 分组之间的排序方向(组与组之间的,而不是组里内容之间的),可选值'ASC', 'DESC';
还有
     (3) groupFn:Function, 分组的依据。这个配置和property只需要指定一个
          groupFn是一个方法,返回值用于分组(用于property不能满足分组的时候,比如有个字段OpDateTime,我不想按照property: OpDateTime分组,而想要格式化成'Y-m-d'之后再分组,此时就应该用groupFn)
     (4) sortProperty:String, 分组之间的排序依据,一般和property设置成一样字段(我测试过不一样的时候,会出现分组乱了的现象),如果property没有设置,而是设置了groupFn,那么最好是设成groupFn里面用到的字段,或者根据情况设置。

7、pageSize:Int, store分页的每页记录数,默认25
     请求后台数据的参数像这样:?page=1&start=0&limit=25
     start是根据page和limit计算出来的,其实page和start只要其中一个就够了。

8、params:Object, 需要传递到后台的其他参数。默认值{},这个params会给proxy,由proxy去请求数据

9、remoteGroup:Bollean,默认false。如果设置成true,
     请求后台数据的参数像这样:?page=1&start=0&limit=25&group=[{"property":"OpDate","direction":"ASC"}]

10、remoteSort:Bollean,默认false。如果设置成true,
     请求后台数据的参数像这样:?page=1&start=0&limit=25&group=[{"property":"OpDate","direction":"ASC"}]&sort=[{"property":"OpDate","direction":"ASC"}, {"property":"ObjType","direction":"ASC"}]
     注意:
     (1) 如果有store设置了grouper,那么会把grouper指定的字段和方向,作为sort里的第一个元素。
          grouper的property如果没有指定(而是指定了groupFn),那么group和sort的第一个元素会是这样的:{"property":null,"direction":"ASC"}
     (2) 如果proxy的simpleSortMode设置为了true,那么只会传递一个sort规则,例如:?page=1&start=0&limit=25&sort=OpDate&dir=ASC

11、remoteFilter:Bollean,默认false。如果设置成true,
     请求后台数据的参数像这样:?page=1&start=0&limit=25&filter=[{"property":"UserName","value":"Admin"},{"property":"ObjName","value":"采购订单"}]

二、proxy
proxy有很多类型,type配置的可选值有ajax, direct, jsonp, rest, localStorage, sessionStorage, sql等
ajax算是前4种的基础了,用的也比较多。最后3种是本地存储。
通过给ajax配置api属性、或者使用direct、rest可以很方便实现简单的增删改查(CRUD,Create, Retrieve, Update, Delete)。
实际使用中一般通过ajax获取数据,增删改还是手动控制的多。
顶上的图,就是配置的ajax获取数据。
看看主要的配置项:
1、type:String,指定proxy的类型

2、actionMethods:Object,包含create、read、update和destroy四种action,每种action可选值'GET', 'POST',即Http请求的类型,也就是上面说的?page=1&start=0&limit=25是如何传递到后台的。
'GET'就是说page=1&start=0&limit=25拼接到url的后面,'POST'就是post提交
     actionMethods: {
          create: "POST",
          read: "GET",
          update: "POST",     
          destroy: "POST",    
     }

3、simpleSortMode:Boolean,上面的store讲过了

4、extraParams:Object, 需要传递到后台的其他参数。

5、filterParam:String,默认'filter'

6、groupParam:String,默认'group'

7、limitParam:String,默认'limit'

8、pageParam:String,默认'page'

9、sortParam:String,默认'sort'

10、startParam:String,默认'start'
上面6个XXXParam,是作为Http请求数据的参数名,默认就行,最好不要改

11、reader:Object,如何读取获取到的数据,有下面的配置项:
     (1) type:String
     (2) rootProperty:String,默认''。分页的时候可以指定此属性,不分页的时候默认空字符串就行。
     (3) successProperty:String,默认'success'。表示返回数据是否有错误,不是必须的
     (4) totalProperty:String,默认'total'。分页的时候,服务端除了返回当前页的数据,还要返回所有页的数据总条数
     reader: {          
          type: "json",          
          rootProperty: 'root'
     }
向上面这个,说明后台返回的数据是json类型,而且返回的数据类似 {total: 100, root: [{name: 'one'}, {name: 'two'}, {name: 'three'}, {name: 'four'}]}
即total是数据总数,root是当前页的所有数据

12、url:String,请求数据的url来源

这篇关于[Phonegap+Sencha Touch] 移动开发8、store和proxy的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/653575

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta

【区块链 + 人才服务】区块链集成开发平台 | FISCO BCOS应用案例

随着区块链技术的快速发展,越来越多的企业开始将其应用于实际业务中。然而,区块链技术的专业性使得其集成开发成为一项挑战。针对此,广东中创智慧科技有限公司基于国产开源联盟链 FISCO BCOS 推出了区块链集成开发平台。该平台基于区块链技术,提供一套全面的区块链开发工具和开发环境,支持开发者快速开发和部署区块链应用。此外,该平台还可以提供一套全面的区块链开发教程和文档,帮助开发者快速上手区块链开发。

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

v0.dev快速开发

探索v0.dev:次世代开发者之利器 今之技艺日新月异,开发者之工具亦随之进步不辍。v0.dev者,新兴之开发者利器也,迅速引起众多开发者之瞩目。本文将引汝探究v0.dev之基本功能与优势,助汝速速上手,提升开发之效率。 何谓v0.dev? v0.dev者,现代化之开发者工具也,旨在简化并加速软件开发之过程。其集多种功能于一体,助开发者高效编写、测试及部署代码。无论汝为前端开发者、后端开发者

pico2 开发环境搭建-基于ubuntu

pico2 开发环境搭建-基于ubuntu 安装编译工具链下载sdk 和example编译example 安装编译工具链 sudo apt install cmake gcc-arm-none-eabi libnewlib-arm-none-eabi libstdc++-arm-none-eabi-newlib 注意cmake的版本,需要在3.17 以上 下载sdk 和ex