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"]

});