ExtJs学习01
1.普通Molde的创建
2.利用Ext.regModel创建模型
3.创建model的实例
3种实例对象的方法
4.Validations 及自定一个验证器
5.简单了解代理，
proxy 就是完成数据的CRUD
6.Model的一对多和多对一的了解
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1.普通Molde的创建
2.利用Ext.regModel创建模型
3.创建model的实例
3种实例对象的方法
//Model类的创建
(function(){
Ext.onReady(function(){
//利用Ext.define来创建我们的模型类
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:'uspcat.com',
age:26,
email:'yungengjjjjkkj;'
});
//alert(p.get('name'));
var p1=Ext.create("person",{
name:'uspcat.com',
age:26,
email:'yungengjjjjkkj'
});
//alert(p1.get('age'));
var p2=Ext.ModelManager.create({
name:'uspcat.com',
age:26,
email:'yungengjjjjkkj'
}, 'person');
alert(p2.get('email'));
});
})();
4.Validations 及自定一个验证器
//1.Validations 2.自定义验证器
(function(){
Ext.onReady(function(){
Ext.data.validations.lengthMessage="错误的长度";
//扩展也就是我们自定义验证机制的一个新的验证方法
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("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
}
]
});
var p1=Ext.create("person",{
name:'uspcat.com',
age:-26,
email:'yungengjjjjkkj'
});
var errors=p1.validate();
var errorInfo=[];
errors.each(function(v){
//alert(v);
errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
});
})();
5.简单了解代理，
proxy 就是完成数据的CRUD
//数据代理1.定义一个类，2.实例化（用代理类),3.导入外界数据
(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' //数据是从.jsp文件中得到的
}
});
//实例化一个对象,用的是代理
var p=Ext.ModelManager.getModel("person");
p.load(1, {
scope: this,
failure: function(record, operation) {
//do something if the load failed
},
success: function(record, operation) {
//do something if the load succeeded
alert(record.data.name);
},
callback: function(record, operation) {
//do something whether the load succeeded or failed
}
});
})();JSP代码如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
System.out.println(request.getParameter("id"));
response.getWriter().write("{name:'uspcat.com',age:26,email:'[email protected]'}");
%>
6.Model的一对多和多对一的了解
//Model的一对多，先简单了解.
(function(){
Ext.onReady(function(){
//类
Ext.regModel("teacher",{
fideld:[
{name:'teacherId',type:"int"},
{name:'name',type:"auto"}
],
hasMany: {
model: 'student',
name : 'getStudent', //函数
filterProperty: 'teacher_Id' //关联的字段
}
});
//学生
Ext.regModel("student",{
fideld:[
{name:'studentId',type:"int"},
{name:'name',type:"auto"},
{name:"teacher_Id",type:'int'}
]
});
//t.students 得到子类的一个store数据集合
});
})()