[03]EXTJS4.0数据模型-Model
数据模型主要讲三大部分model proxy store
1.普通Model的创建
数据模型是真实世界中事物在系统中的反应 Extj4.0中的model相当于DB中的table或Java中的Class
2.利用Ext.regModel创建模型
3.创建model的实例
3种实例化对象的方法
4.Validations
5.自定义验证器
6.简单数据代理
proxy它完成我们数据的CRUD
7.Model的一对多和多对一
teacher 1=>n student
---------------------------------------------------------------------------------------
lesson3.html
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Ext.window.Window</title>
- <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/>
- <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script>
- <script type="text/javascript" src="proxy.js"></script>
- </head>
- <body>
- </body>
- </html>
--------------------------------------------------------------------------------------
这个例子主要讲两种创建类的方法：Ext.define和Ext.regModel,这两种方式的区别是Ext.regModel不需要自己写继承Ext.data.Model
三种实例化对象的方法：new,Ext.create,Ext.ModelMgr.create
model.js
- (function(){
- Ext.onReady(function(){
- //我们利用Ext.define来创建我们的模型类
- //DB table person(name,age,email)
- Ext.define("person",{
- extend:'Ext.data.Model',
- fields:[
- {name:'name',type:'auto'},
- {name:'age',type:'int'},
- {name:'email',type:'auto'},
- ]
- });
- //MVC模式中model一定是M层
- Ext.regModel("user",{
- fields:[
- {name:'name',type:'auto'},
- {name:'age',type:'int'},
- {name:'email',type:'auto'},
- ]
- });
- //实例化我们的person类
- //1.new关键字
- var p = new person({
- name:'upcat.com',
- age:26,
- email:'[email protected]'
- });
- console.log(p.get('name'));
- var p2 = Ext.create("person",{
- name:'upcat.com',
- age:26,
- email:'[email protected]'
- });
- console.log(p2.get('age'));
- var p3 = Ext.ModelMgr.create({
- name:'upcat.com',
- age:26,
- email:'[email protected]'
- },'person');
- console.log(p3.get('name'));
- });
- })();
-------------------------------------------------------------------------------------
这个例子主要讲创建对象的方法Ext.ModelMgr.create和得到类名的注意事项(必须用类调用getName方法)
model2.js
- (function(){
- Ext.onReady(function(){
- //我们利用Ext.define来创建我们的模型类
- //DB table person(name,age,email)
- Ext.define("person",{
- extend:'Ext.data.Model',
- fields:[
- {name:'name',type:'auto'},
- {name:'age',type:'int'},
- {name:'email',type:'auto'},
- ]
- });
- var p = Ext.ModelMgr.create({
- name:'upcat.com',
- age:26,
- email:'[email protected]'
- },'person');
- //想要得到类的方法名
- //下面的代码会报：p.getName is not a function
- //console.log(p.getName());//java class object.getClass.getName
- console.log(person.getName());
- });
- })();
--------------------------------------------------------------------------------------
这个例子主要讲校验，包括更改校验的提示信息，自定义校验方法，model中如何校验
validations.js
- (function(){
- //使提示信息显示中文
- Ext.data.validations.lengthMessage = "错误的长度";
- Ext.onReady(function(){
- //扩展也就是我们自定义验证机制的一个新的验证方法
- Ext.apply(Ext.data.validations,{
- age:function(config,value){
- var min = config.min;
- var max = config.max;
- if(min <= value && value<= max){
- return true;
- }else{
- this.ageMessage = this.ageMessage+'它的范围应该在['+min+'~'+max+"]";
- return false;
- }
- },
- ageMessage:'age数据出现了错误'
- });
- //我们利用Ext.define来创建我们的模型类
- //DB table person(name,age,email)
- Ext.define("person",{
- extend:'Ext.data.Model',
- fields:[
- {name:'name',type:'auto'},
- {name:'age',type:'int'},
- {name:'email',type:'auto'},
- ],
- validations:[
- {type:'length',field:'name',min:2,max:6},
- {type:'age',field:'age',min:0,max:150}
- ]
- });
- //实例化我们的person类
- var p = Ext.create("person",{
- name:'upcat.com',
- age:-26,
- email:'[email protected]'
- });
- var errors = p.validate();
- var errorInfo = [];
- errors.each(function(v){
- console.log(v);
- errorInfo.push(v.field + " " + v.message);
- });
- console.log(errorInfo.join("\n"));
- /**
- *name 2-6
- *set(String name){
- * if(){
- * }else{
- * }
- */
- //age不能小于0也不能大于150
- });
- })();
-------------------------------------------------------------------------------------
这个例子主要讲代理(在模型中定义的代理proxy)：
proxy.js
- (function(){
- Ext.onReady(function(){
- Ext.define("person",{
- extend:'Ext.data.Model',
- fields:[
- {name:'name',type:'auto'},
- {name:'age',type:'int'},
- {name:'email',type:'auto'},
- ],
- proxy:{
- type:'ajax',
- url:'person.jsp'
- }
- });
- var p = Ext.ModelManager.getModel('person');
- //1传递过去是id=1
- p.load(1,{
- scope:this,
- failure:function(record,operation){},
- success:function(record,operation){
- console.log(record.data.name);
- },
- callback:function(record,operation){}
- });
- });
- })();
person.jsp
- <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>
- <%
- System.out.println(request.getParameter("id"));
- response.getWriter().write("{name:'upcat.com',age:26,email:'[email protected]'}");
- %>
-----------------------------------------------------------------------------------
下面代码只是实例，不能够看出什么效果，讲的是model一对多的关系
one2many.js
- (function(){
- Ext.onReady(function(){
- //类老师
- Ext.regModel("teacher",{
- field:[
- {name:'teacherId',type:'int'},
- {name:'name',type:'auto'}
- ],
- hasMany:{
- model:'student',
- name:'getStudent',
- filterProperty:'teacher_Id'
- }
- });
- //类学生
- Ext.regModel("student",{
- field:[
- {name:'studentId',type:'int'},
- {name:'name',type:'auto'},
- {name:'teacher_Id',type:'int'}
- ]
- });
- //t.students 得到子类的一个store数据集合
- });
- })();
11111111111