代理種類截圖:
ExtJS提供的數據代理主要分為兩大類:
1.客戶端代理 (Ext.data.proxy.Client)
2.服務器代理(Ext.data.proxy.Server)
這兩個類 都繼承自 Ext.data.proxy.Proxy ,
客戶端代理主要包括:Memory WebStorage SessionStorage LocalStorage
服務器端代理包括: Ajax Rest JsonP
Ext.data.proxy.Memory
//this is the model we will be using in the store
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'id', type: 'int' },
{ name: 'name', type: 'string' },
{ name: 'phone', type: 'string', mapping: 'phoneNumber' }
]
});//this data does not line up to our model fields - the phone field is called phoneNumber
var datas = {
users: [
{
id: 1,
name: 'Ed Spencer',
phoneNumber: '555 1234'
},
{
id: 2,
name: 'Abe Elias',
phoneNumber: '666 1234'
}
]
};
//創建memory代理
var memProxy = new Ext.data.proxy.Memory({model: 'User',
reader: { root: 'users' },
data: datas});
//讀取數據
memProxy.read(new Ext.data.Operation(), function (result) {var total = result.resultSet.total;
alert("數據總條數為:" + total);})
DOM Storage 分為兩類, sessionStorage 和 localStorage
sessionStorage: 用於存儲與 當前瀏覽器窗口關聯的數據.窗口關閉后,sessionStorage中數據將無法使用
localStorage: 用於長期存儲數據.窗口關閉,數據仍然可以訪問, 所有瀏覽器窗口可以共享 數據.
下面看看一個 localStorage的例子
效果:
Ext.define('Search', {
fields: ['id', 'query'],
extend: 'Ext.data.Model',
proxy: {
type: 'localstorage',
id: 'twitter-Searches'
}
});var store = new Ext.data.Store({
model: "Search"
});//添加數據
store.add({ query: 'Sencha Touch' });
store.add({ query: 'Ext JS' });
//保存數據
store.sync();//讀取數據
store.load();var msg = [];
store.each(function (data) {
msg.push(data.get('id') + '-' + data.get('query'));})
alert(msg.join('\n'));當 關閉瀏覽器,從今瀏覽此頁面后,效果圖:
說明,localstorage 是長期存儲數據的,即使關閉瀏覽器,數據仍然存在.
下面還要說明一點:LocalStorage代理如果沒有指定id,則會使用 store的id,如果兩個都沒指點,那么就會拋出異常
Ext.data.proxy.SessionStorage
效果:
Ext.define('Search', {
fields: ['id', 'query'],
extend: 'Ext.data.Model',
proxy: {
type: 'sessionstorage',
id: 'twitter-Searches'
}
});var store = new Ext.data.Store({
model: "Search"
});//添加數據
store.add({ query: 'Sencha Touch' });
store.add({ query: 'Ext JS' });
//保存數據
store.sync();//讀取數據
store.load();var msg = [];
store.each(function (data) {
msg.push(data.get('id') + '-' + data.get('query'));})
alert(msg.join('\n'));當關閉瀏覽器,從新瀏覽此頁面時:
.
里面的數據沒有增加,驗證了剛才的說法.
服務器端代理
服務器端代理會訪問遠程服務器資源,適合於長期保存重要的數據資料.
下面是 分頁參數
//定義User模型
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
//定義數據代理
var proxy = new Ext.data.proxy.Ajax({
model: 'User',
url: 'Handler.ashx',
reader: {
type: 'json', //jsonReader
root: 'users'
}
});
//創建請求參數對象
var operation = new Ext.data.Operation({
page: 2,
start: 10,
limit: 20,
action: 'read' //請求動作
});
proxy.doRequest(operation, callback); //發起請求
function callback(operation) { //請求的回調函數
//獲取服務器返回的原始數據
var reText = operation.response.responseText;
//獲取記錄總數
var totalRecords = operation.resultSet.totalRecords;
//獲取記錄數組
var records = operation.resultSet.records;
alert(totalRecords);
}
服務器返回的數據: {users:[{id:'" + id + "',name:'gao'}]}
排序參數
參數信息:
只需更改 上面程序的 operation配置即可
var operation = new Ext.data.Operation({
sorters: [
new Ext.util.Sorter({
property: 'id',
direction: 'ASC' //DESC
})
],
action: 'read'
});
自定義排序參數:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
});
var proxy = new Ext.data.proxy.Ajax({
model: 'User',
url: 'Handler.ashx',
reader: {
type: 'json',
root: 'users'
},
sortParam: 'sortParam', //自定義排序參數名稱
encodeSorters: function (sorters) {//排序參數的數組,返回一個JSON-encodes的字符串
var length = sorters.length,
sortArray = [], //定義參數數組
sorter, i;
for (var i = 0; i < length; i++) {
sorter = sorters[i];
sortArray[i] = sorter.property + '#' + sorter.direction;
}
return sortArray.join(",");
}
});
var operation = new Ext.data.Operation({
sorters: [
new Ext.util.Sorter({
property: 'id',
direction: 'ASC' //DESC
}),
new Ext.util.Sorter({
property: 'age',
direction: 'DESC'
})
],
action: 'read'
});
proxy.doRequest(operation, callback);
function callback(operation) {
//獲取服務器返回的原始數據
var reText = operation.response.responseText;
//獲取記錄總數
var totalRecords = operation.resultSet.totalRecords;
//獲取記錄數組
var records = operation.resultSet.records;
alert(totalRecords);
}
過濾器參數
var operation = new Ext.data.Operation({
filters: [
new Ext.util.Filter({
property: 'id',
value: '2'
})
]
,
action: 'read'
});
自定義過濾器參數 :
暫留
分組參數
var operation = new Ext.data.Operation({
groupers: [
new Ext.util.Grouper({
property:'age',
direction:'ASC'
})
]
,
action: 'read'
});
Ext.data.proxy.Rest實例
Ext.regModel('User', {
fields: ['id', 'name', 'age'],
proxy: {type: 'rest', //使用Ext.data.proxy.Rest代理
url: 'Handler.ashx'
}});
var u1 = Ext.ModelManager.create({ name: 'gao', age: 12 }, 'User');
u1.save(); //因為沒有id所以調用 create方法var u2 = Ext.ModelManager.create({ id: 10, name: 'gao2', age: 12 }, 'User');
u2.save(); //因為有id,所以 執行update
var u3 = Ext.ModelManager.getModel('User');
u3.load(100); //調用read方法 ,讀取id等於300的數據
var u4 = Ext.ModelManager.create({ id: 300, name: 'gao4', age: 11 }, 'User');
u4.destroy(); //
Ext.data.proxy.JsonP
暫留
Reader數據讀取器
數據讀取器的作用就是 將 數據代理 讀取到的 原始數據 按照不同的規則進行解析,將解析后的數據
保存到Model模型對象 中,.
extJS主要數據解析器為:
1.Json數據讀取器
2.XML數據讀取器
3.數組數據讀取器
Json讀取器:
var userdata = {
"total": 2000,
"users": [
{
"id": 22,
"name": "gao",
"orders": [
{
"id": 30,
"total": 100
},
{
"id": 320,
"total": 1002
}
]}
]
}
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name'],
hasMany: 'Order'});
//定義訂單模型
Ext.regModel("Order", {fields: ["id", "total"],
belongTo: 'User' //定義 order和user之間的多對一關系
})//創建 memory代理
var meoProxy = new Ext.data.proxy.Memory({model: 'User',
reader: {type: 'json',
root: 'users'
},
data: userdata})
//讀取數據
meoProxy.read(new Ext.data.Operation(), callBack);
function callBack(res) {
//獲取總數據數
var count = res.resultSet.total;
//獲取第一個用戶信息
var user = res.resultSet.records[0];
//獲取該用戶的第一個賬單信息
var order = user.orders().getAt(1);
alert("總數據數:" + count + '\n姓名:' + user.get('name') + '\n賬單金額:' + order.get('total'));}
讀取復雜的json數據:
代碼:
var userdata = {
"users": [
{
"id": 22,
"name": "gao",
"info": { "id": 22, "name": "gaoyu" }}
]
}
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name']
});
//創建 memory代理
var meoProxy = new Ext.data.proxy.Memory({model: 'User',
reader: {type: 'json',
root: 'users',
record: 'info' //定位有效數據的位置
},
data: userdata})
//讀取數據
meoProxy.read(new Ext.data.Operation(), callBack);
function callBack(res) {
//獲取第一個用戶信息
var dd = res.resultSet.records[0];
alert('姓名:' + dd.get('name'));}
數組讀取器
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name'],
proxy: //定義代理
{
type: 'ajax',
url: 'Handler.ashx',
reader: {
type: 'array' //讀取器類型為 數組
}
}});
var user = Ext.ModelManager.getModel('User');
//通過代理讀取數據
user.load(1, {success: function (res) {
alert(res.get('id'));
}
})
服務器返回數據: [[1,\'nill\']]
Writer數據寫入器
主要用於將 數據代理 提交到服務端 的數據進行編碼,.
主要寫入器,有 JSON寫入器和XML寫入器
Json寫入器使用:
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name'],
proxy: //定義代理
{
type: 'ajax',
url: 'Handler.ashx',
writer: {
type: 'json' //寫入為json格式
}
}});
var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User');
user.save({
success: function () { alert('save succeed!') },
failure: function () { alert('save failed!') }})
XML寫入器
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name'],
proxy: //定義代理
{
type: 'ajax',
url: 'Handler.ashx',
writer: {
type: 'xml' //寫入為json格式
}
}});
var user = Ext.ModelMgr.create({ id: 12, name: 'gao' }, 'User');
user.save({
success: function () { alert('save succeed!') },
failure: function () { alert('save failed!') }})
遍歷store
//定義用戶模型
Ext.regModel('User', {fields: ['id', 'name'],
proxy: //定義代理
{
type: 'memory'
}
})
var store = new Ext.data.Store({
autoLoad: true,
data: [{ id: 12, name: 'ss' }, { id: 11, name: 'zz'}],
model: 'User'
})
//遍歷store中元素
var msg = ['遍歷:'];
store.each(function (res) {msg.push('id=' + res.get('id') + 'name=' + res.get('name'));
})
alert(msg.join('\n'));
