Ext4.0学习札记（1~3章 基础类）

//这时候要启用自动加载
Ext.Loader.setConfig({
	enabled:true,
	paths:{
		myApp:'js/Bmsys/ml' //js文件相对路径，需要与命名空间保持一致
	}
});

//这时候只要保证Window.js放在js/Bmsys/ml这个目录下命名空间为Bmsys.ml.Window就可以了。
//这时就不需要在JSP文件中引入Window.js,等到下面的程序被执行时，才会根据命名空间去到后台加载Window.js。
//原理就是通过命名空间与文件路径，拼接好后通过写入<script>标签的方式加载。
var win = Ext.create('Bmsys.ml.Window',{
                   titile: 'youWindow',
                   requires: ['Bmsys.ml.Window']
             }
).show();

• config: 这个属性就是把你定义类的属性自动的加上get、set方法，省去自己去写的麻烦事。

Ext.define('Bmsys.ml.Window', {
	extend:'Ext.window.Window',
        title: 'Window',
        width: 380,
        height: 300,
        //定义一些自己的扩展参数
        myTitile: 'myWindow',
        config: {
              myHeight : 800
        }
 });

var win = Ext.create('Bmsys.ml.Window',{});

alert(win.getMyTitle());//报错，没有定义getMyTitle函数
alert(win.getMyHeight());//正常弹出值为800

//放在config里面定义的属性，Ext会自动给这个属性加上get、set方法。

• mixins：类的混合（多继承实现），因为我们在用define定义类的时候，extend只能继承一个类。为了拥有其它类定义好的方法及功能，我们可以通过类的混合来实现。

Ext.define("say",{
	cansay:function(){
		alert("hello");
	}
})
Ext.define("sing",{
	sing:function(){
		alert("sing hello 123");
	}
})

//通过类的混合，就可以轻松拥有上面两个类里面的函数。
Ext.define('user',{
	mixins :{
		say : 'say',
		sing: 'sing'
	}
});

var u = Ext.create("user",{});
u.cansay();//say类里面的方法
u.sing();//sing类里面的方法

• static：类似java中静态，我们可以定义一些静态的属性以及方法，通过类名'.'的方式来访问。

Ext.define('Computer', {
     statics: {
         factory: function(brand) {
             // 'this' in static methods refer to the class itself
             return new this(brand);
         }
     },
     constructor: function() { ... }
});
//直接通过类名'.'的方式访问静态方法
var dellComputer = Computer.factory('Dell');

//我们利用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'}
	]
});
//定义的时候，不需要每次写extend:"Ext.data.Model"
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:'yunfengcheng2008@126.com'
});
//alert(p.get('name'));
var p1 = Ext.create("person",{
	name:'uspcat.com',
	age:26,
	email:'yunfengcheng2008@126.com'
});
//alert(p1.get('age'));
var p2 = Ext.ModelMgr.create({
	name:'uspcat.com',
	age:26,
	email:'yunfengcheng2008@126.com'
},'person');
alert(p2.get('email'));

//实例不能直接通过getName得到类名，因为这个方法是类的 class object.getClass.getName 
//alert(p2.getName());

//通过类.getName可以获得类名，因为person是模型类的定义，而不是实例
alert(person.getName());

//在校验之前，修改原始类里属性的默认值
Ext.data.validations.lengthMessage = "错误的长度";

Ext.onReady(function(){
	//通过apply方法来在原始的校验器类上扩展我们自定义验证机制的的一个新的验证方法
	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的值就是Ext.data.validations里方法名称
			//field是你要校验字段名
			//field后面的参数就是名称等于type值的函数的参数。
			{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:'yunfengcheng2008@126.com'
	});	
	
	//通过validate()可以得到数据校验的错误集合
	//每个error里面含有两个属性(field---校验字段的名,message---校验函数返回的错误信息)
	var errors = p1.validate();
	var errorInfo = [];
	errors.each(function(v){
		errorInfo.push(v.field+"  "+v.message);
	});
	alert(errorInfo.join("\n"));
});

Ext.define("person",{
	extend:"Ext.data.Model",
	fields:[
		{name:'name',type:'auto'},
		{name:'age',type:'int'},
		{name:'email',type:'auto'}
	],
	//通过代理从后台获取数据（数据要与model的fields里面的字段相对应）
	proxy:{
		type:'ajax',
		url:'person.jsp'
	}
});
var p = Ext.ModelManager.getModel("person");
//通过load方法来触发proxy加载数据
p.load(1, {
	scope: this,
	//record.data就是加载进来的一个数据实例对象
	success: function(record, operation) {
		alert(record.data.name)
	}
});

//类老师
Ext.regModel("teacher",{
	fideld:[
		{name:'teacherId',type:"int"},
		{name:'name',type:"auto"}
	],
	//建立老师与学生的1对多关系
	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是老师的一个实例，就可以通过t.students 得到子类student的一个store数据集合

Ext.regModel("person",{
	fields:[
		'name','age'
	],
	proxy :{//在proxy下，你可以配置reader（读），同样也可以配置writer（写）
		type:'ajax',
		url:'person.jsp',
		writer:{//配置一些写的参数
			//type:'json'
			type:'xml'  //把js对象以xml的方式，传入后台
		}
	}
});
Ext.ModelMgr.create({
	name:'uspcat.con',
	age:1
},'person').save();

Ext.define("person",{
	extend:'Ext.data.Model',
	fields:[
		{name:'name'},
		{name:'age'}
	],
	proxy:{
		type:'memory'
	}
})
var s = new Ext.data.Store({
	//model:'person',
	data:[
		{name:'uspcat.com',age:1},
		{name:'yfc',age:26}
	],
	//有了fields，我们就不需要在单独定义Model并且引用
	fields:[
		{name:'name'},
		{name:'age'}
	],
	//通过data属性，请偶们已经能够把数据初始化好了
	//proxy是动态的区后台去数据			
	//proxy:{
	//	type:'ajax',
	//	url:'person.jsp'
	//}			
	//autoLoad:true
});
s.load(function(records, operation, success){
	//遍历
	Ext.Array.each(records,function(model){
		alert(model.get('name'));
	});
	//过滤出字段name='yfc'
	s.filter('name',"yfc");
	s.each(function(model){
		alert(model.get('name'));
	});
	//通过正则来查找数据集里面的记录，返回该记录的索引			
	var index = s.find('name','yfc',0,false,true,false);
	alert(s.getAt(index));//当前的Model对象
});