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: ['[email protected]', '[email protected]']},
        {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爲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'));
            }
        });
    }
});

ProductServer1.jsp

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="net.sf.json.JSONArray" %>
<%
String filter = request.getParameter("filter");
JSONArray filters = JSONArray.fromObject(filter);
int userId = filters.getJSONObject(0).getInt("value");
response.setContentType("application/json;charset=UTF-8");
String result = "{products:[{id : 1, title: '產品1', user_id : "+userId+"}, {id : 2, title: '產品2', user_id : "+userId+"}]}";
System.out.println("result="+result);
response.getWriter().write(result);
%>

5、模型間的多對一關係 

//註冊分類數據模型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'));
});

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
String categoryId = request.getParameter("id");
response.setContentType("application/json;charset=UTF-8");
response.getWriter().write("{id : "+categoryId+", type: '產品類型"+categoryId+"'}");
%>

6、Ext.data.proxy.Memory示例 

//創建數據模型
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);
}

7、Ext.data.proxy.Ajax示例 

//創建數據模型
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);
}

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    response.setContentType("application/json;charset=UTF-8");
    String result = "[{name: '張三', age : 20}, {name: '李四', age : 30}]";
    response.getWriter().write(result);
%>

8、Ext.data.reader.Json示例 

//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'));
}

9、讀取複雜的JSON數據 

//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'));
}

10、Ext.data.Store示例 

//定義用戶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'));

11、Ext.data.ArrayStore示例 

//定義用戶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'));