Javascript - ExtJs - 資料

標籤：font   不一致   12px   多個   request   class   頭部   非同步   樣本   

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方法中，此屬性要改為paramsmethod : ‘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使用。而它的資料來源可以是二維數組

 

Javascript - ExtJs - 資料