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 //是否禁用緩存，默認禁用。

方法.method

request(config) 
//發起請求並接收遠程反饋，Ext.data.Connection的配置全部可寫在request的配置中，區別在於extraParams要改為params。

abort( [ TransactionId ] )
TransactionId : 事務ID
 
//當同時有多個請求發生時，根據指定的事務id放棄其中的某一個請求。如果不指定事務id，則放棄最後一個請求。

isLoading( [ TransactionId  ] )
//根據事務id判斷對應的請求是否完成。如果未指定事務id，就判斷最後一個請求是否完成。

示例.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>

服務端的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。

Ext.data.Store

數據交互中介者，它負責對數據進行排序、分組、分頁、搜索並將數據提供給gridPanel、treePanel和combobox使用。而它的數據來源可以是二維數組

Javascript - ExtJs - 數據