extjs 数据存储和提交

extjs深入浅出学习笔记

一、ajax提交的实现方式。

1)Ext.data.Connection

继承自Ext.lib.Ajax

必须new 的方式实现

  var conn = new Ext.data.Connection({
        autoAbort: false,
        defaultHeaders: {
            referer: 'http://localhost/ext/extbook-sample/'
        },
        disableCaching : false,
        extraParams : {
            name: 'name'
        },
        method : 'GET',
        timeout : 300,
        url : '01.txt'
    });
    conn.request({
        success: function(response) {
            Ext.Msg.alert('info', response.responseText);
        },
        failure: function() {
            Ext.Msg.alert('warn', 'failure');
        }
    });

 

2)Ext.Ajax.request

继承自Ext.data.Connection 的比较多的方式。

Ext.Ajax.request({ 
    url: '07-01.txt', 
    success: function(response) { 
        Ext.Msg.alert('成功', response.responseText); 
    }, 
    failure: function(response) { 
        Ext.Msg.alert('失败', response.responseText); 
    }, 
    params: { name: 'value' } 
}); 

url:比较的路径

success:提交成功和失败的闲应方法。

params: 提交的参数,可以是json数据,或者是Array数据格式。

对比Ext.data.Connection 不需要new实现。

下面一句话是原文,不理解。。。

Connection是为了给Ext.data中的各种proxy提供Ajax功能，分配不同的实例更有利于分别管
理。Ext.Ajax为用户提供了一个简易的调用接口

3)Ext.lib.Ajax

最低层的实现

 

Ext.lib.Ajax.request( 
    'POST', 
    '07-01txt', 
    {success: function(response){ 
        Ext.Msg.alert('成功', response.responseText); 
    },failure: function(){ 
        Ext.Msg.alert('失败', response.responseText); 
    }}, 
    'data=' + encodeURIComponent(Ext.encode({name:'value'})) 
);   

和Ext.ajax.request的区别是, 这里的参数是有顺序的。而且,提交的参数只能是array的格式。

比与Ext.Ajax相比，Ext.lib.Ajax的唯一优势就是它可以在EXT 1.x中使用。

 

二、extjs中的Data

 

1) Ext.data.Record 与 Ext.data.store

Ext.data.Record就是一个设定了内部数据类型的对象， 它是Ext.data.Store的最基本组
成部分。如果把Ext.data.Store看作是一张二维表，那么它的每一行就对应一个Ext.data.
Record实例。

Ext.data.Record.create可以创建不同的数据类型，就像我们的class。

var PersonRecord = Ext.data.Record.create([ 
    {name: 'name', type: 'string'}, 
    {name: 'sex', type: 'int'} 
]); 

PersonRecord就是一个class,

我们可以

var boy = new PersonRecord({
    name: 'boy',
    sex: 0
});

得到一个对象，也就是一个Record

得到Record中的数据方式  boy.data[‘name’];  boy.get(‘name’); 修改数据boy.set(‘name’,’jony’);也可以直接boy.data

[‘name’]=”jony”但是直接修改不能回滚。boy.commit()提交数据.boy.reject() 回滚。。

 

 

Ext.data.Store是EXT中用来进行数据交换和数据交互的标准中间件，无论是Grid还是。ComboBox，都是通过它实现数据读取、类型

转换、排序分页和搜索等操作的。

var data = [
    ['boy', 0],
    ['girl', 1]
];

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();

每个store最少需要两个组件的支持，分别是proxy和reader，proxy用于从某个途径读取始数据，reader用于将原始数据转换成

Record实例。 上面代码中 PersonRecord就是类型。data就是数据

一个store中有多个record。 store和record是聚合的关系。

 

2)Ext.data.Store 的proxy和reader

 

A)Proxy

MemoryProxy:   只能从JavaScript对象获得数据，可以直接把数组，或JSON和XML格式的数
交给它处理，如下面的代码所示。

使用方法：

var proxy = new Ext.data.MemoryProxy([
    ['id1','name1','descn1'],
    ['id2','name2','descn2']
]);   

如果给定了url则是HttpProxy。            

HttpProxy:HttpProxy使用HTTP协议，通过Ajax去后台取数据，构造它时需要设置url:'xxx.jsp'请注意，这里的HttpProxy不支持跨域

使用方法：var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});

后台代码：

response.setContentType("application/x-json");
Writer out = response.getWriter(); 
out.print("[" + 
        "['id1','name1','descn1']" + 
        "['id2','name2','descn2']" + 
    "]");                 

 

ScriptTagProxy :ScriptTagProxy的用法几乎和HttpProxy一样，

后台代码：

String cb = request.getParameter("callback"); 
response.setContentType("text/javascript"); 
Writer out = response.getWriter(); 
out.write(cb + "("); 
out.print("[" + 
        "['id1','name1','descn1']" + 
        "['id2','name2','descn2']" + 
    "]"); 

out.write(");");

其中的关键就在于从请求中获得的callback参数，这个参数叫做回调函数。ScriptTag- Proxy会在当前的HTML页面里添加一个

<scripttype="text/javascript"src="xxx.jsp"> </script>标签，然后把后台返回的内容添加到这个标签中，这样就可以解决跨域访

问数据的问题。。

 

B)Reader

JsonReader: JSON是一种非常重要的数据格式，key:value,  与数组相比，JSON的最大优点就是支持分页，

var data = { 
    id:0, 
    totalProperty:2, 
    successProperty:true, 
    root:[ 
        {id:'id1',name:'name1',descn:'descn1',person:{
       id:1,name:'man',sex:'male' 
        }}, 
        {id:'id2',name:'name2',descn:'descn2',person:{ 
            id:2,name:'woman',sex:'female' 
        }} 
    ] 
}; 
var reader = new Ext.data.JsonReader({ 
    successProperty: "successproperty", 
    totalProperty: "totalProperty", 
    root: "root", 
    id: "id" 
}, [ 
    'id','name','descn', 
    {name:'person_name',mapping:'person.name'}, 
    {name:'person_sex',mapping:'person.sex'} 
]);

 

 

ArrayReader :ArrayReader的作用是从二维数组里依次读取数据，然后生成对应的Record.缺点是不支持分页

var reader = new Ext.data.ArrayReader({ 
    id:1 
},[ 
    {name:'name',mapping:1}, 
    {name:'descn',mapping:2}, 
    {name:'id',mapping:0}, 
]);

XmlReader

 

 

 

实际开发时，并不需要每次都对proxy、reader、store这三个对象进行配置，EXT为我们
提供了几种可选择的整合方案。

 

SimpleStore = Store + MemoryProxy + ArrayReader

  var ds = Ext.data.SimpleStore({ 
      data: [ 
            ['id1','name1','descn1'], 
            ['id2','name2','descn2'] 
      ], 
      fields: ['id','name','descn'] 
 });

JsonStore = Store + HttpProxy + JsonReader

 

  var ds = Ext.data.JsonStore({ 
      url: 'xxx.jsp', 
      root: 'root', 
      fields: ['id','name','descn'] 
 }); 

 

Ext.data.GroupingStore对数据进行分组

  var ds = new Ext.data.GroupingStore({ 
      data: [ 
          ['id1','name1','female','descn1'], 
          ['id2','name2','male','descn2'], 
          ['id3','name3','female','descn3'], 
          ['id4','name4','male','descn4'], 
          ['id5','name5','female','descn5'] 
      ], 
      reader: new Ext.data.ArrayReader({ 
          fields: ['id','name','sex','descn']        }), 
       groupField: 'sex', 
       groupOnSort: true 
   }); 

转载于:https://www.cnblogs.com/phpzxh/archive/2010/03/19/1689928.html