Javascript - ExtJs - 数据

Ext.data命名空间

有关数据存储、读取的类都定义在Ext.data命名空间中。Ext的gridPanel、combobox的数据源都是来自Ext.data提供的类。该命名空间下的类支持A数组、Json和xml数据。

Ext.data.Connection

此类封装了Ajax,提供比传统Javascript异步传输数据更为简洁的方法,兼容了所有浏览器。它负责与服务端实现异步交互,并把从服务端的数据转交给Ext.data.Proxy进行处理。以下代码创建connection实例,并配置好它的各个参数,使用request向服务器发起请求并接收服务端的反馈。

配置.config

url : String //请求的url。

extraParams : Object | String //请求传递的参数。如果配置在request方法中,此属性要改为params

method : ‘GET‘ | ‘POST‘ //请求的方式。

callback : function //请求完成后的回调函数,无论是成功还是失败,都会执行。

success : function //请求成功时的回调函数。

failure : function //请求失败时的回调函数

scope : Object //回调函数的作用域。

form : Object | String //绑定的form表单。

isUpload : bool //是否执行文件上传。

headers : Object //请求的头部信息。

xmlData : Object //XML文档对象,可通过URL附加参数的方式发起请求。

disableCaching : bool //是否禁用缓存,默认禁用。

配置.config

方法.method

request(config)
//发起请求并接收远程反馈,Ext.data.Connection的配置全部可写在request的配置中,区别在于extraParams要改为params。

abort( [ TransactionId ] )
TransactionId : 事务ID
//当同时有多个请求发生时,根据指定的事务id放弃其中的某一个请求。如果不指定事务id,则放弃最后一个请求。

isLoading( [ TransactionId  ] )
//根据事务id判断对应的请求是否完成。如果未指定事务id,就判断最后一个请求是否完成。

方法.method

示例.example

<script type="text/javascript">
    Ext.onReady(function () {
        var conn = new Ext.data.Connection();
        //发起请求并接收远程反馈
        conn.request({
            method: ‘GET‘,//请求方式
            timeout: 300,//请求超时时间
            autoAbort: false,//是否自动断开链接
            disableCaching: false,//是否禁用缓存
            //请求的网址的头部
            defaultHeaders: { referer: ‘http://localhost:6524/‘ },
            //请求的网址
            url: ‘AjaxFormHandler.ashx‘,
            //请求附带的参数
            params: {
                name: ‘sam‘
            },
            success: function (response) {
                //将远程反馈的Json字符解析为Json对象
                var m = Ext.JSON.decode(response.responseText);
                Ext.Msg.alert(‘success‘,m.msg );
            },
            failure: function () {
                Ext.Msg.alert(‘error‘, ‘http错误‘);
            }
        });

    });
</script>

示例.example

服务端的AjaxFormHandler.ashx:

Ext.data.Model

表示数据模型,就像一张数据库的空表,可定义字段。如果你要建立自己的数据模型,就需要使你的类派生于Ext.data.Model。创建自定义数据模型的实例后,你就可以插入数据了。 Ext.data.Record是Ext.data.Model的别名,创建数据模型建议使用Model而不是Record。

创建数据模型并获取

<script type="text/javascript">
        Ext.onReady(function () {

            //创建表
            Ext.define("employee", {
                extend: "Ext.data.Model",
                fields: [
                    { name: "employeeName", type: "string" },
                    { name: "age", type: "int", convert: null },
                    { name: "gender", type: "int" },
                    { name: "IsMarried",type:"boolean",defaultValue:true,convert:null}
                ]
            });

            //创建实例,插入数据
            //实例名不能与类名相同,否则无效
            var user = new employee({
                employeeName: "sam",
                age: 32,
                gender: 0,
                IsMarried:false
            });

            var br = "<br>";
            //数据访问方式有以下几种,任选
            var record = user.get("employeeName") + br + user.data["age"] + br + user.data.gender + br + user.data.IsMarried;
            Ext.MessageBox.alert("", record);

        });
    </script>

创建数据模型并获取

修改数据

不建议使用data属性修改记录,应使用set访问器。因为set方法可以判断值是否与之前的数据不一致,不一致将被视为新值,修改值之前它会将旧值取出来存入modified属性中以便你可能用得上。

//修改数据
user.data.employeeName = "korn";//不建议这样写
user.data["employeeName"] = "korn";//不建议这样写
user.set("employeeName", "korn");//建议这样写
Ext.MessageBox.alert("", user.get("employeeName"));

修改数据

方法.method

commit()
//提交数据,调用此方法后,会清空modified并将drity设为false。

reject()
//撤销修改,把修改后的数据还原为modified中存储的值再清空modified并将drity设为false。

getChanges()
//获取修改的数据并包装成Json对象返回。

isModified()
//测试数据是否被修改。

copy()
//忽略drity和modified,将记录复制一份。

此类的方法、属性多数与Ext.data.Store有关,详情可查询API。

方法.method

Ext.data.Store

数据交互中介者,它负责对数据进行排序、分组、分页、搜索并将数据提供给gridPanel、treePanel和combobox使用。而它的数据来源可以是二维数组

时间: 2024-10-08 20:10:11

Javascript - ExtJs - 数据的相关文章

JavaScript实现数据结构中的队列和堆栈

今天在项目中要使用JavaScript实现数据结构中的队列和堆栈,这里做一下总结. 一.队列和堆栈的简单介绍 1.1.队列的基本概念 队列:是一种支持先进先出(FIFO)的集合,即先被插入的数据,先被取出! 如下图所示: 1.2.堆栈的基本概念 堆栈:是一种支持后进先出(LIFO)的集合,即后被插入的数据,先被取出! 如下图所示: 二. 在JavaScript中实现队列和堆栈 在JavaScript中实现队列和数组主要是通过数组,js数组中提供了以下几个方法可以让我们很方便实现队列和堆栈: sh

javascript 复合数据的定义和使用 ( 小例子 )

思路:主要是先要获取到三个 box 元素的 top 值 和 left 值,然后有复合数据进行存值,再进行数组值的位置移动来实现切换 box 位置效果: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> #warp{margin:50p

Javascript - ExtJs - 基本组件

与JQuery一样,ExtJs也有一个文档加载完毕的事件. Ext.onReady(function () { }); 基本组件(Basic components) 弹框组件 MessageBox MessageBox是Ext函数的静态函数成员,它提供一些列的弹出框方法. alert(title,suggest) title是标题,suggest是提示信息,弹出一个确定对话框. Ext.onReady(function () { Ext.MessageBox.alert("好吧,成功"

Javascript - ExtJs - Itemselector

引入扩展文件 Extjs4.2根目录下: examples \ ux \ css \ images (这是选择按钮的图片资源)examples \ ux \ css \ ItemSelector.cssexamples \ ux \ form \ MultiSelect.jsexamples \ ux \ form \ ItemSelector.js 我是将以上文件取出来打包到我项目中自己创建的ux目录,没有全部使用ExtJs的包,然后引入以上文件: <script src="/ExtJs

Javascript - ExtJs - 常用方法和属性

常用方法和属性(Common methods and attributes) 获取 get(x) x是元素的ID || dom元素对象 || ExtElement对象 将参数所指转化为ExtElement对象并返回它(非Dom元素对象,而是对Dom元素的封装),此方法等同于new Ext.Element(x) . Ext.select(x) x是选择器 返回一个CompositeElement对象,表示ExtElment对象的集合.但返回的这个对象实际上并非数组,不能通过数组索引访问它包含的数据

解决Javascript大数据列表引起的网页加载慢/卡死问题。

在一些网页应用中,有时会碰到一个超级巨大的列表,成千上万行,这时大部份浏览器解析起来就非常痛苦了(有可能直接卡死). 也许你们会说可以分页或动态加载啊?但是有可能需求不允许分页,动态加载?网络的延迟也会造成体验不好. 那么适时候介绍本文的实现思路了. 首先上最终的效果: 主要思路如下: 首先,创建如上图所示的三个DIV,scrollbar用于显示具体的滚动条(CSS需要设置zindex,要显示在demo-list的底层),real-panel用于计算列表的实际高度(每一个li的高度是固定的,有多

Javascript - ExtJs - 类

类(Class) preparation! 我用的是ext-4.2,解压后会得到以下文件 学习要用到的文件很少,现在保留以下文件和整个文件夹,然后删除其它文件并保持目录结构.本页面底部有提供基础包的下载. 在aspx页面中引入必要的Extjs文件,ext-all-dev可以不引人,但它作为调试使用,so建议保留. 测试一下程序是否能跑起来. <script type="text/javascript"> Ext.onReady(function () { Ext.Messa

JavaScript二进制数据序列化和反序列化

最近业余时间在搞h5小游戏,由于同步协议过于频繁,和服务器之间的同步直接用json就显得太浪费了,于是我们商讨之下决定改用二进制.学习过程中并没有遇到一篇就解决问题的文章,遂再总结一发. 1.二进制数据的存储 ArrayBuffer对象.TypedArray对象.DataView对象是JavaScript操作二进制数据的一个接口. (1)ArrayBuffer对象:代表内存之中的一段二进制数据,它不能直接读写,只能通过视图(TypedArray视图和DataView视图)来读写,视图的作用是以指

Java抓取网页数据(原网页+Javascript返回数据)

转载请注明出处! 原文链接:http://blog.csdn.net/zgyulongfei/article/details/7909006 有时候因为种种原因,我们须要採集某个站点的数据,但因为不同站点对数据的显示方式略有不同! 本文就用Java给大家演示怎样抓取站点的数据:(1)抓取原网页数据:(2)抓取网页Javascript返回的数据. 一.抓取原网页. 这个样例我们准备从http://ip.chinaz.com上抓取ip查询的结果: 第一步:打开这个网页,然后输入IP:111.142.