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
-
-
- Ext.define('User', {
- extend: 'Ext.data.Model',
- fields: [
- { name: 'id', type: 'int' },
- { name: 'name', type: 'string' },
- { name: 'phone', type: 'string', mapping: 'phoneNumber' }
- ]
- });
-
-
- var datas = {
- users: [
- {
- id: 1,
- name: 'Ed Spencer',
- phoneNumber: '555 1234'
- },
- {
- id: 2,
- name: 'Abe Elias',
- phoneNumber: '666 1234'
- }
- ]
- };
-
-
-
- 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',
- 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'
- })
- ],
-
- 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) {
-
- 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'
- }),
- 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',
- url: 'Handler.ashx'
- }
-
- });
-
- var u1 = Ext.ModelManager.create({ name: 'gao', age: 12 }, 'User');
- u1.save();
-
- var u2 = Ext.ModelManager.create({ id: 10, name: 'gao2', age: 12 }, 'User');
- u2.save();
- var u3 = Ext.ModelManager.getModel('User');
- u3.load(100);
- var u4 = Ext.ModelManager.create({ id: 300, name: 'gao4', age: 11 }, 'User');
- u4.destroy();
-
- data.proxy.JsonP
暫留
Reader數據讀取器
數據讀取器的作用就是 將 數據代理 讀取到的 原始數據 按照不同的規(guī)則進行解析,將解析后的數據
保存到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'
- })
-
-
- 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數據:
讀取復雜的json數據:
- 代碼:
-
- var userdata = {
-
-
- "users": [
- {
- "id": 22,
- "name": "gao",
- "info": { "id": 22, "name": "gaoyu" }
-
- }
- ]
-
-
- }
-
- Ext.regModel('User', {
-
- fields: ['id', 'name']
-
- });
-
-
- 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'
- }
- }
-
- });
- 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'
- }
- }
-
- });
- 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'
-
-
- })
-
- var msg = ['遍歷:'];
- store.each(function (res) {
-
- msg.push('id=' + res.get('id') + 'name=' + res.get('name'));
- })
- alert(msg.join('\n'));