extjs 4 学习小结4

1 EXT JS 4的数据模型分为三类
   1） 实体模型 model
   2) 数据代理  proxy,用来处理数据的读取和保存，通过AJAX代理获得服务端的数据
   3） 数据读写器：Reader,Writer,用来读原始的数据到MODEL中。
   4）数据集：store,保存MODEL对象的客户端缓存，提供了对数据的过滤，排序，查找功能。

2）EXT.DATA.MODEL,前身为EXT 3中的ext.data.record类，进行了增强；
模型分为  fields:字段定义，proxy:数据代理，associations:模型管理  Validations:数据校验。


3）基本数据模型
    Ext.onReady(function(){
//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
        {name: 'name',  type: 'string'},
        {name: 'age',   type: 'int'},
        {name: 'phone', type: 'string'}
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    phone: '555-555-5555'
}, 'User');
//获取员工姓名
alert(user.get('name'));
});

4）ext.validations
    Ext.onReady(function(){
//定义默认的验证提示信息
Ext.data.validations.presenceMessage = '必须是有效值。';
Ext.data.validations.lengthMessage = '长度错误。';
Ext.data.validations.formatMessage = '格式错误。';
Ext.data.validations.inclusionMessage = '没有包括在可接受的数据中。';
Ext.data.validations.exclusionMessage = '不是可接受的值。';

//自定义数值范围验证
Ext.apply(Ext.data.validations,{
number : function(config, value){
if (value === undefined) {
            return false;
        }
            var min    = config.min,
                max    = config.max;
       
        if ((min && value < min) || (max && value > max)) {
            return false;
        } else {
            return true;
        }
},
numberMessage : '数值范围错误。'
});

//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
             {name: 'name',     type: 'string'},
             {name: 'age',      type: 'int'},
             {name: 'phone',    type: 'string'},
             {name: 'gender',   type: 'string'},
             {name: 'username', type: 'string'},
             {name: 'alive',    type: 'boolean', defaultValue: true}
    ],
    validations: [
        {type: 'presence',  field: 'age'},
        {type: 'number',  field: 'age', min : 30},
        {type: 'length',    field: 'name', min: 2},
        {type: 'inclusion', field: 'gender',   list: ['男', '女']},
        {type: 'exclusion', field: 'username', list: ['[e-mail]', '[e-mail]']},
        {type: 'format',    field: 'username',
        //校验用户名是否为电子邮件格式
        matcher: /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/
        }
    ]
});
//创建User模型的实体对象
var user = Ext.ModelMgr.create({
    name : 'tom',
    age  : 24,
    gender : 'man',
    username: 'abc'
}, 'User');
//执行数据验证
var errors = user.validate();
//获取验证信息
var message = [];
errors.each(function(v){
message.push(v.field+' : '+v.message)
});
alert(message.join('\n'));
});

5 数据代理：在4。0前，数据代理是store一部分，读写数据必须通过store,新版本中数据代理可以在数据模型中配置。

6 EXT 4中，支持一对多和多对一两种关系。
  一对多例子：
    Ext.onReady(function(){
//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
             {name: 'name', type: 'string'},//用户名称
             {name: 'id', type: 'int'}//用户id
    ],
    //User与Product是一对多关系
    hasMany: {model: 'Product', name:'getProducts',autoLoad : false},
//其中autoload为FALSE，表示延迟加载
    proxy: {
    type : 'ajax',
        url : 'userServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
             {name: 'id', type: 'int'},//产品id
             {name: 'title', type: 'string'},//产品名称
             {name: 'user_id', type: 'int'}//用户id
    ],
    proxy: {
    type : 'ajax',
        url : 'ProductServer.jsp',
    reader: {
            type: 'json',
            root: 'products'
        }
    }
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id为1的User实例
user.load(1, {
    success: function(rec) {
    //获取user_id为1的产品Store
    var products = rec.getProducts();
    //加载user_id为1的产品数据
    products.load({
    callback : function(records, operation, success){
    var msg = [];
    for(var i = 0; i < records.length; i++){
    var rec = records[i];
    msg.push('产品名称：'+rec.get('title')+' 用户id：'+rec.get('user_id'));
    }
    alert(msg.join('\n'));
    }
    });
    }
});
});

7 多对一关系
     Ext.onReady(function(){
//注册分类数据模型Category
Ext.regModel('Category', {
    fields: [//定义模型字段
             {name: 'type', type: 'string'},//产品类型名称
             {name: 'id', type: 'int'}//产品类型id
    ],
    proxy: {
    type : 'ajax',
        url : 'CategoryServer.jsp'
    }
});
//注册产品数据模型Product
Ext.regModel('Product', {
    fields: [//定义模型字段
             {name: 'id', type: 'int'},//产品id
             {name: 'title', type: 'string'},//产品名称
             {name: 'category_id', type: 'int'}//用户id
    ],
    belongsTo : 'Category'
});
//创建product实例
var product = new Product({
    id: 100,
    category_id: 1,
    title: '产品1'
});
product.getCategory(function(category, operation){
//获取类型名称
alert(category.get('type'));
});
});

8 PROXY介绍
    分为客户端和服务端代理
  ext.data.proxy.proxy为所有代理类的父类，有四个执行操作CRUD封装了。
  1）ext.data.proxy.memory为ext.data.proxy.client的子类
       Ext.onReady(function(){
//创建数据模型
Ext.regModel('User', {
    fields: ['id','name','age']
});

//定义内存数据变量
var userData = {
    users : [
            { id: 1, name: '张三', age: 20 },
            { id: 2, name: '李四', age: 30 },
            { id: 3, name: '王五', age: 40 }
        ]
};

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
            root: 'users'
        },
data : userData
});

//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){ //load方法的回调函数
var totalRecords = result.resultSet.total;
alert('读取内存数据，记录总是：'+totalRecords);
}
});


2 ）ext.data.proxy.webstorage分为ext.data.proxy.localstorage和ext.data.proxy.sessionstorage
  都是支持HTML5的DOMSTORAGE才有用的
    比如
    Ext.onReady(function(){
//创建数据模型
Ext.regModel('User', {
    fields: ['id','name','age'],
    proxy: {
        type: 'localstorage',//使用Ext.data.proxy.LocalStorage代理
        id  : 'User-Searches'//代理数据的唯一标志
    }
});

var store = new Ext.data.Store({
    model: "User"
});

//添加数据
store.add({name: '张三', age: 20});
store.add({name: '李四', age: 30});

//保存数据
store.sync();
//读取数据
store.load();

var msg = [];
store.each(function(rec){
msg.push(rec.get('id')+' '+rec.get('name')+' '+rec.get('age'));
});

alert(msg.join('\n'));
});

3） ext.data.proxy.server服务端类，其中分为三个子类
     3.1  ext.data.proxy.ajax
            Ext.onReady(function(){
//创建数据模型
Ext.regModel('Person', {
    fields: ['name','age']
});
//创建Ajax代理
var ajaxProxy = new Ext.data.proxy.Ajax({
url : 'personServer.jsp',
model: 'Person',
    reader: 'json'
});
//创建请求参数对象
var operation = new Ext.data.Operation({
    action: 'read'//设置请求动作为read
});
//读取数据
ajaxProxy.doRequest(operation,callBack);
//doRequest方法的回调函数
function callBack(operation){
//获取原始响应数据
var responseText = operation.response.responseText;
//获得记录总数
var totalRecords = operation.resultSet.totalRecords;
//获得记录数组
var records = operation.resultSet.records;

alert('使用Ajax代理读取远程数据，记录总是：'+totalRecords);
}
});
   其中operation中可以定义如排序,过滤,分组等参数
4) EXT JS 4中支持REST,EXT.DATA.PROXY.REST
      Ext.onReady(function(){
//创建数据模型
Ext.regModel('Person', {
    fields: ['id','name','age'],
    proxy: {
        type: 'rest',//使用Ext.data.proxy.Rest代理
        url : '/persons'
    }
});

var person1 = Ext.ModelManager.create({name: '张三', age: 20}, 'Person');
person1.save();//由于是新建数据未指定id，因此执行create方法。

var person2 = Ext.ModelManager.create({id:200,name: '李四', age: 20}, 'Person');
person2.save();//由于指定id为200，因此执行update方法。

var person3 = Ext.ModelManager.getModel('Person');
person3.load(300)//调用read方法,读取id为300的数据。

var person4 = Ext.ModelManager.create({id:400,name: '王五', age: 20}, 'Person');
person4.destroy();//由于指定id为400，因此执行destroy方法。
});

5) EXT.DATA.PROXY.JSONP
    Ext.onReady(function(){
//创建数据模型
Ext.regModel('Person', {
    fields: ['id','name','age'],
    proxy: {
        type: 'jsonp',//使用Ext.data.proxy.JsonP代理
        url : 'http://192.168.1.150:8080/JsonPProxyServer.jsp'
    }
});
var person = Ext.ModelManager.getModel('Person');
//跨域读取数据
person.load(1,{
success: function(rec) {
    alert('姓名：'+rec.get('name')+'\n年龄：'+rec.get('age'));
    }
});
});
  服务端:
     <%
    String id = request.getParameter("id");
String personName = "{id:"+id+",name:'张三',age:30}";
boolean jsonP  = false;
//获取回调函数名称
String cb = request.getParameter("callback");
if (cb != null) {
jsonP  = true;
response.setContentType("text/javascript;charset=UTF-8");
} else {
response.setContentType("application/x-json;charset=UTF-8");
}
String msg = "";
if (jsonP ) {
msg = cb + "(";
}

msg += personName;

if (jsonP ) {
msg += ");";
}
response.getWriter().write(msg);
%>
  
9 Reader读取器
  相当于在原始数据格式与EXT JS标准格式之间进行转换.
   A EXT.DATA.READER.JSON
     Ext.onReady(function(){
//JSON格式的用户及订单信息
var userData = {
"total" : 2000,
"users": [{
"id": 123,
"name": "张三",
"orders": [{
"id": 50,
"total" : 100
}]
}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ],
    hasMany: 'Order'//定义User与Order之间的一对多关系
});
//定义订单Order模型
Ext.regModel("Order", {
    fields: [ 'id', 'total' ],
    belongsTo: 'User'//定义Order与User之间的多对一关系
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
            type: 'json',//Ext.data.reader.Json读取器
            root: 'users'
        },
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取总记录数
var count = result.resultSet.total;
//获取第一个用户信息
var user = result.resultSet.records[0];
//获取该用户的第一个账单信息
var order = user.orders().getAt(0);
alert('总记录数：'+count+
  '\n姓名：'+user.get('name')+
  '\n账单金额：'+order.get('total'));
}
});

  B 读复杂的JSON数据
      Ext.onReady(function(){
//JSON格式的用户及订单信息
var userData = {
"users": [{
"searchDate" : "2011-04-24",//查询时间
"role" : "admin",//查询人角色
"info" : {
"id": 123,
"name": "张三"
}
}]
}
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ]
});

//创建memory代理
var memoryProxy = new Ext.data.proxy.Memory({
model : 'User',
reader: {
            type: 'json',//Ext.data.reader.Json读取器
            root: 'users',
            record : 'info'//定位有效数据的位置
        },
data : userData
});
//读取数据
memoryProxy.read(new Ext.data.Operation(), callBack)
//数据读取之后的回调函数
function callBack(result){
//获取第一个用户信息
var user = result.resultSet.records[0];
alert('姓名：'+user.get('name'));
}
});

    C 读取XML
       Ext.onReady(function(){
//定义用户User模型
Ext.regModel("User", {
    fields: [ 'id', 'name' ],
    proxy: {
        type: 'ajax',
        url : 'xmlServer.jsp',
        reader: {
            type: 'xml',//Ext.data.reader.Xml解析器
            record: 'user'
        }
    }
});

var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
    success: function(rec) {
    alert("XML读取器示例：\n" +
      "用户姓名："+rec.get('name'));
    }
});
});

10 writer写入器
    1)ext.data.writer.json:将实体模型MODEL中的数据转为JSON格式发到服务端
      Ext.onReady(function(){
//定义用户User模型
Ext.regModel("User", {
    fields: ['id', 'name', 'age' ],
    proxy: {
        type: 'ajax',
        url : 'writerServer.jsp',
        writer : {
            type: 'json'//Ext.data.writer.Json读取器
        }
    }
});

//创建User模型的实体对象
var user = Ext.ModelMgr.create({
id : 1,
    name : 'tom',
    age  : 24
}, 'User');

//保存数据，格式化后的数据将被发往服务端
user.save({
success : function(){alert("数据保存成功")},
failure : function(){alert("数据保存失败")}
});
});

11 STORE数据集
   为客户端MODEL的缓存,通过数据代理加载数据,也可以LOADATE的手工方法加载数据.ext.data.store提供了排序,
过滤,查找等功能
    1)简单的
     Ext.onReady(function(){
//定义用户User模型
Ext.regModel("User", {
    fields: ['name', 'age' ],
    proxy: {
        type: 'memory'
    }
});
//创建数据集对象
var myStore = new Ext.data.Store({
autoLoad: true,
data : [{name: '张三', age : 20},
                {name: '李四', age : 30}],
    model: 'User'
});
//遍历Store中的记录
var msg = ['遍历Store中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));
});

   2)  ARRAYSTORE
    Ext.onReady(function(){
//定义用户User模型
Ext.regModel("User", {
    fields: ['name', 'age' ],
    proxy: 'memory'
});
//创建ArrayStore数据集对象
var myStore = new Ext.data.ArrayStore({
autoLoad: true,
data : [['张三',20],['李四',30]],//数组数据
    model: 'User'
});
//遍历Store中的记录
var msg = ['遍历ArrayStore中的记录：'];
myStore.each(function(rec){
msg.push('姓名:'+rec.get('name')+' 年龄:'+rec.get('age'));
});
alert(msg.join('\n'));
});