Ext Js 数据传输与存储（三）：

数据传输与存储：
一、ExtJs实现Ajax的方式：
1、Ext.lib.Ajax是最底层的封装，Ext.Ajax,Ext.data.Connection内部功能都是依靠Ext.lib.Ajax来实现的。其实现代码如下：

Ext.lib.Ajax.request(

    "POST", 

    "<%=path%>/test",

    {

    success: function(response){

    Ext.Msg.alert("成功",response.responseText);

    },failure: function(response){

    Ext.Msg.alert("失败",response.responseText);

    }

    },

    "name=nick&age=28"

);

// 4个参数分别是：method、url、callback、params，比较笨拙，不建议使用

2、Ext.data.Connection对Ext.lib.Ajax进行了封装，在使用Ext.data.Connection之前需要先创建Conenction实例。

var conn = new Ext.data.Connection({

    url: "<%=path %>/test",

    method: "POST",

    timeout: 300,

    extraParams: {

    name: "nick",

    age: "29"

    }

});

conn.request({

    success: function(response){

    Ext.Msg.alert("res",response.responseText);

    },

    failure: function(){

    Ext.Msg.alert("caole","hxl");

    }

    });
// 其中Connection的request方法也可以指定其他的参数，详细参数参考API，创建实例时的url、method、timeout参数都可以在request方法里指定。
3、Ext.Ajax类继承了Ext.data.Connection，为Ajax的请求提供了最大灵活性的操作方式。

// 简单的请求 Basic request

Ext.Ajax.request({

     url: 'foo.php',

    success: someFn,

    failure: otherFn,

    params: { foo: 'bar' }

});

// 简单的Ajax式的表单提交。Simple ajax form submission

Ext.Ajax.request({

    form: 'some-form'

});

// 规定每次请求的头部都有这样的事件！Global Ajax events can be handled on every request!
Ext.Ajax.on('beforerequest', this.showSpinner, this);
二、数据的存储
1、Ext.data.Record，就是一个设定内部数据类型的对象，可以把Ext.data.Store看成一个二维的表，Ext.data.Record的实例对应表的一条记录。

var TopicRecord = Ext.data.Record.create([

    {name: 'title', mapping: 'topic_title'},

    {name: 'author', mapping: 'username'},

    {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},

    {name: 'lastPost', mapping: 'post_time', type: 'date'},

    {name: 'lastPoster', mapping: 'user2'},

    {name: 'excerpt', mapping: 'post_text'}

]);

var myNewRecord = new TopicRecord({

    title: 'Do my job please',

    author: 'noobie',

    totalPosts: 1,

    lastPost: new Date(),

    lastPoster: 'Animal',

    excerpt: 'No way dude!'

});

myStore.add(myNewRecord);

获取了Record的实例后，可以通过myNewRecord.get("author")或者myNewRecord.data.author或者myNewRecord.data["author"]获取属性值；其他的参考Record API

2、Ext.data.Store，Store类封装了一个客户端的Record对象的缓存， 为诸如GridPanel、ComboBox和DataView等的小部件提供了数据的入口。Store对象使用一个

DataProxy的实现来访问数据对象，该Proxy对象在configured定义。在DataReader实现的帮助下，从该类提供的数据对象来创建Record实例。

1）从store中获取数据：

store.getAt(0).get("author");

store.getCount();  // 返回所有的纪录数

store.getRange(0,10); // 获取多个record

store.each(function(record){}) // 对每个record调用

store.getById()  // 通过id找record

2）load函数：

采用配置好的Reader格式去加载Record缓存，具体请求的任务由配置好的Proxy对象完成。

如果使用服务器分页，那么必须指定在options.params中start和limit两个参数。start参数表明了从记录集（dataset）的哪一个位置开始读取，limit是读取多少

笔的记录。Proxy负责送出参数。

参数项： 

params :送出的HTTP参数，格式是JS对象。An object containing properties to pass as HTTP parameters to a remote data source.

callback: Function 回调函数，这个函数会有以下的参数传入:

r : Ext.data.Record[]

success: 是否成功。Boolean success indicator

scope : 回调函数的作用域（默认为Store对象）。

add : 表示到底是追加数据，还是替换数据。

3、proxy：（如何获取数据）

1)Ext.data.MemoryProxy只能从javascript中获取数据，可以直接把数组、json、xml数据交个它处理。

var proxy = new Ext.data.MemroyProxy(data);

2)Ext.data.HttpProxy,使用http协议，通过ajax去后台获取数据。 （AJAX方式）

var proxy = new Ext.data.HttpProxy({url:"....."});

后台返回的数据要以json的形式

3）跨域获取数据Ext.dataScriptTagProxy();

4、reader：从proxy获取的数据需要解析，需要转换成record后才能给store使用 （如何解析数据）

1）Ext.data.ArrayReader,从二维数组中读取数据，转换成record。（不支持分页）

2）Ext.data.JsonReader。（支持分页）

准备的json数据：

var data = {

totalProperty: 100, // 表示数据总量

successProperty: true, // 可选项，表示当前请求是否执行成功，进而判断是否需要进行数据加载

root: [

{ ..... },

{ ..... }

]

}

3) Ext.data.XmlReader

5、高级store

1)SimpleStore = Store + MemoryProxy + ArrayReader

var ds = new Ext.data.SimpleStore({

data: [

["1","nick",23],

["2","nick2",28],

],

fields: ["id","name","age"]

});

2)JsonStore = Store + HttpProxy + JsonReader

var ds = new Ext.data.JsonStore({

url: "xxx.jsp",

root: "root",

fields: ["id","name","age"]

});