代码改变世界

ExtJs之数据代理

2012-12-25 15:01  hduhans  阅读(173)  评论(0)    收藏  举报

/*extjs版本4.1.1*/

一、代理结构

  Ext.data.proxy.Proxy 代理根类,分为客户端代理(Client)和服务器代理(Server)

    Ext.data.proxy.Memory 普通的内存代理

    Ext.data.proxy.WebStorage 浏览器客户端代理

      Ext.data.proxy.SessionStorage  浏览器级别代理(类似session存储,关闭浏览器数据消失)

      Ext.data.proxy.LocalStorage 本地化的级别代理(类似cookie存储,关闭浏览器数据不消失)

    Ext.data.proxy.Server 服务端代理

      Ext.data.proxy.Ajax 异步加载的方式

        Ext.data.proxy.Rest  一种特使的Ajax

      Ext.data.proxy.JsonP 跨域交互的代理

      Ext.data.proxy.Direct 命令

二、基本使用范例

  ① Ext.data.proxy.LocalStorage

Ext.regModel("user",{   //定义模型类
    fields:[
        {name:'name',type:'string'}
    ],
    proxy:{
        type:'localstorage',  //指定代理类型为本地代理
         id:'my-user'   //指定id 本地存储和读取数据时通过此id
    }
});
var store=Ext.create('Ext.data.Store',{
    model:'user'
});
store.add({name:'Im hans'});   //添加数据
store.sync();   //store将数据保存至本地
store.load();   //读取本地数据
var myd=[];
store.each(function(v){
    myd.push(v.get("name"));
});
alert(myd.join('\n'));

  ② Ext.data.proxy.Ajax

Ext.regModel("user",{
    fields:[
        {name:'name',type:'string'}
    ]
});
var ajaxProxy = Ext.create("Ext.data.proxy.Ajax",{
    url:'user.jsp',
    model:'user',
    reader:'json'   //json格式传送数据
}); 
ajaxProxy.doRequest(new Ext.data.Operation(),function(o){
    var val=o.response.responseText;
    alert(Ext.decode(val)["name"]);
},this);

  user.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<% 
    response.getWriter().write("{name:'I am hans'}");
%>

  ③

  ④

  ⑤

  ⑥