EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)

在EXT中,proxy类用于交互数据。分为客户端代理和服务器端代理两类

客户端代理:

LocalStorageProxy

SessionStorageProxy

MemoryProxy

服务器端代理:

AjaxProxy

ScriptTagProxy

DirectProxy

RestProxy

 

一、LocalStorageProxy

说明:LocalStorageProxy代理使用了html5的localstorage API 来存储和加载数据。如果浏览器关闭,数据不会丢失

例子:

    <script type="text/javascript">
Ext.onReady(
function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend:
'Ext.data.Model',
fields: [{
name:
'id', type: 'int'
}, {
name:
'name', type: 'string'
}, {
name:
'age', type: 'int'
}],
//定义LocalStorageProxy代理类,通过html5的localstorage API 来存储和加载数据
proxy: {
type:
'localstorage',
id:
'myinformation'
}
});
//创建一条数据并储存
Ext.ModelMgr.create({
id:
1,
name:
'animal',
age:
30
},
'MyInformation').save();
});
</script>

执行结果:

EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)_第1张图片

 

二、SessionStorageProxy
说明:SessionStorageProxy使用html5的sessinstorage API来存储和加载数据,关闭浏览器,数据将消失

例子:

    <script type="text/javascript">
Ext.onReady(
function () {
//定义一个数据模型
Ext.define('MyInformation', {
extend:
'Ext.data.Model',
fields: [{
name:
'id', type: 'int'
}, {
name:
'name', type: 'string'
}, {
name:
'age', type: 'int'
}],
//定义SessionStorageProxy代理类,通过html5的sessionstorage API 来存储和加载数据
proxy: {
type:
'sessionstorage',
id:
'myinformation'
}
});
//创建一条数据并储存
Ext.ModelMgr.create({
id:
1,
name:
'animal',
age:
30
},
'MyInformation').save();

});
</script>

执行结果:

EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)_第2张图片

三、MemoryProxy

说明:MemoryProxy主要用于加载上下文中的数据,刷新页面会丢失或者重置数据,关闭页面数据会丢失:

例子:

<script type="text/javascript">
Ext.onReady(
function () {
//数据,JSON格式
var data = {
informations: [{
id:
1,
name:
'AAA',
age:
34
}, {
id:
2,
name:
'BBB',
age:
45
}]
}
//定义一个数据模型
Ext.define('MyInformation', {
extend:
'Ext.data.Model',
fields: [{
name:
'id', type: 'int'
}, {
name:
'name', type: 'string'
}, {
name:
'age', type: 'int'
}]
});
//定义一个数据容器,加载数据
var store = Ext.create('Ext.data.Store', {
model:
'MyInformation',
//加载的类容
data: data,
//定义memoryproxy,从本地(上下文)加载数据
proxy: {
type:
'memory',
reader: {
type:
'json',
root:
'informations'
}
}
});
store.load();

});
</script>

执行结果:

EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理)_第3张图片




你可能感兴趣的:(extjs4)