日期:2014-05-16  浏览次数:20428 次

ExtJS4学习笔记九--数据模型的使用
1、创建Ext.data.Model数据实体模型
//注册用户数据模型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'));


2、在模型中进行数据验证
//定义默认的验证提示信息
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: ['admin@xx.xx', 'user@xx.xx']},
        {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'));


3、在模型中通过代理加载数据
//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},
            {name: 'age', type: 'int'},
            {name: 'id', type: 'int'}
    ],
    //配置数据代理
    proxy: {
    	type : 'ajax',
        url : 'userServer.jsp'
    }
});
var user = Ext.ModelManager.getModel('User');
//通过代理读取数据
user.load(1, {
    success: function(rec) {
    	alert(rec.get('name'));
    }
});
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="java.util.*" %>
<%
String userId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+userId+", name: 'user"+userId+"'}");
%>


4、模型间的一对多关系
//注册用户数据模型User
Ext.regModel('User', {
    fields: [//定义模型字段
            {name: 'name', type: 'string'},//用户名称
            {name: 'id', type: 'int'}//用户id
    ],
    //User与Product是一对多关系
    hasMany: {model: 'Product', name:'getProducts',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 : 'ProductServer1.jsp',
	    reader: {
            type: 'json',
            root: 'products'
        }
    }
});
//创建User实例
var user = Ext.ModelManager.getModel('User');
//读取id