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>

执行结果：

 

二、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>

执行结果：

三、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>

执行结果：