ExtJS4.2的学习

最新推荐文章于 2018-07-25 09:10:35 发布

坤哥的洋葱头

最新推荐文章于 2018-07-25 09:10:35 发布

阅读量2.6k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Tankun2011/article/details/25752081

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第一讲 HelloWorld初期的一点认识

index.jsp里面关于ExtJS的引

<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all-neptune.css">
<script type="text/javascript" src="extjs4/bootstrap.js"></script>
<script type="text/javascript" src="lession02/indexDemo.js"></script>

注意，这里的css/ext-all-neptune.css这就是现实风格的问题，一般都是ext-all.css这样用的就是默认的；这里引入bootstrap.js打开之后会发现，他自己引用了ExtJS的js文件，不用重复引用

(function(){
	Ext.onReady(function(){
		Ext.MessageBox.alert("hello","hello word!");//ExtJS的弹框，非常漂亮
		var myArray = [1,2,3,4,-3,-4];
		
//		Ext.Array.every(myArray, function(item){//ExtJS的大部分自带的类都这么用；用Ext引，然后在里面传值和添加方法等。
//			if(item>0){
//				return true;
//			}else{
//				alert(item);
//				return false;
//			}
//			
//		},this);
		
		var newMyArray = Ext.Array.filter(myArray, function(item){
			if(item>0){
				return true;
			}else{
				alert(item);
				return false;
			}
			
		},this);
		alert(newMyArray.join("\n"));//数组的遍历方式，join("\n")join里的值是每个数值遍历后后面的添加效果。
	});
})();

上面这是ExtJS的一般情况下的开始。在Ext.onReady下进行，多看API，ExtJS的API做的是非常好的。

onReady( fn, scope, options )

Adds a function to be called when the DOM is ready, and all required classes have been loaded.If the DOM is ready and all classes are loaded, the passed function is executed immediately.

第二讲

1、JS类的生命，和对象的创建；2、原始方法用ExtJS创建一个window；3、利用一个按钮出发window窗体，了解一下ExtJS的时间机制；4、用ExtJS4.0的create来创建window；5、利用define自定义类并且继承(extend)window；6、requires JS的异步加载；7、config 自动的get和set；8、mixins 类的混合

(function(){
	Ext.Loader.setConfig({//这是批量加载某个文件夹下的js文件，这样就不用在jsp文件里，引入多个js文件了
		enabled:true,
		paths:{
			myApp:'lession02/code/ux'
		}
		
	});
	Ext.onReady(function(){
		/*//这是新建Window，不过在ExtJS里面尽量不要用new
		var win = new Ext.window.Window({
			width:400,
			height:300,
			title:'uspcat'
		});
//		win.show();
		//1.得到那个按钮的dom对象
		//2.为按钮对象添加单机时间
		//3.单机的时候调用对象win的show方法
		<strong>Ext.get("mybut").on("click",function(){//这是在jsp里，有个id='mybut'的按钮;
		win.show()});</strong>
		*/
//		var o = {//这是新建一个类，下面是实现他的方法，方法名为：say
//			say : function(){
//				alert(1111);
//			}
//		}
//		var fn = Ext.Function.alias(o,'say');//这是对o类的say方法取一个别名，这样直接可以fn()就执行了o的say的效果
//		fn();
		
//		var win = Ext.create('Ext.window.Window',{//这个就等于var win = new Ext.window.Window
//			width:400,
//			height:300,
//			title:'uspcat'
//		});
//		win.show();

		

		
		Ext.get("mybut").on("click",function(){//这个就是加载lession02.code.ux.mywin,其实就是个类
			var win = Ext.create("lession02.code.ux.mywin",{
				title:'mywin',
//				price:600,
				requires:['ux.mywin']
			});
			win.show();
//			alert(win.getPrice());
		});
		
//		Ext.define("say",{//这个是正规的生命一个类名为say，有个say的方法
//			say:function(){
//				alert("hello");
//			}
//		});
//		Ext.define('sing',{
//			sing:function(){
//				alert("sing");	
//			}
//		})
//		
//		Ext.define('user',{
//			mixins:{//这个不是继承的意思，而是混合了两个类的方法
//				say:"say",
//				sing:"sing"
//			}
//		});
//		var u = Ext.create("user");//这样就可以用了，这是新建个对象的方式。define是新建个类的方式。
//		u.say();
//		u.sing();
	 });
})();

上面有：获取页面里的button，并且加上监听；Ext.Function.alias对类的方法启别名，可以在全局中调用；Ext.Loader.setConfig整体引进js的文件；config:{price:500}自动生成set、get方法；mixins可以作为有点类似于继承的接口或者把方法继承给自己。

第三讲

1、普通Model的创建
数据模型对真实世界中对事务在系统的反应ExtJS中的model相当于DB中的table或JAVA中的Class
2、利用Ext.regModel创建模型
3、创建model的实例
4、Validations
5、自定义验证器
6、简单数据地阿里，详细的代理proxy要在后面课程讲
7、Mod了的一对多和多对一在我们先简单了解，在讲完Ajax之后我们在深入学习

Ext.define("person",{
	extend:"Ext.data.Model",
	fields:[
	{name:'name',type:'auto'},
	{name:'age',type:'auto'},
	{name:'email',type:'auto'}
	]
});

Model相当于数据库的table；在运用了Model之后，有了对象之后，可以直接使用get(...)、set(...)方法

		//实例化我们的person类
		//1.new 关键字
		var p = new person({
			name:'uspact.com',
			age:26,
			email:'tankun2011@qq.com'
		});
//		alert(p.get('name'));
		
		var p1 = Ext.create("person",{
			name:'p1.uspact.com',
			age:26,
			email:'tankun2011@qq.com'
		});
//		alert(p1.get('name'));
		
		var p2 = Ext.ModelMgr.create({
			name:'p2.uspact.com',
			age:26,
			email:'tankun2011@qq.com'
		},'person');
//		alert(p2.get('name'));//获取属性值
//  		alert(p2.getName());//不行 class object.getClass.getName
  		alert(person.getName());//这是获取person的类的Name

validations自定义的验证机制；在Ext.data.validations里面可以自定义报错文字；下面那个扩展自定义的验证机制，源代码也是这样的书写方式。看最后这个p1.validations的读取和便利方式。

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("person",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'auto'},
				{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:'p1.uspact.com',
			age:176,
			email:'tankun2011@qq.com'
		});
		var errors = p1.validate();
		var errorInfo = [];
		errors.each(function(v){
			errorInfo.push(v.field+"	"+v.message);
		});
		alert(errorInfo.join("\n"));
	});

proxy代理方式：如下proxy；person.jsp的网页为：response.getWriter().write("{name:'uspcat.com',age:26,email:'tankun2011@qq.com'}");的响应。通过load之后，可以获取值，在record，record.data.name就可以取到name值。

	Ext.define("person",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'auto'},
				{name:'age',type:'auto'},
				{name:'email',type:'auto'}
			],
			proxy:{
				type:'ajax',
				url:'person.jsp'
			}
		});
		var p = Ext.ModelManager.getModel("person");
		p.load(1, {
	    	scope: this,
		    failure: function(record, operation) {
		        //do something if the load failed
		        //record is null
//		        alert(record);
		        
		    },
		    success: function(record, operation) {
		        //do something if the load succeeded
		        alert(record.data.name);
		    },
		    callback: function(record, operation, success) {
		        //do something whether the load succeeded or failed
		        //if operation is unsuccessful, record is null
		    }
		});

第四讲
数据代理Proxy是进行说读写的主要途径，通过代理操作数据进行CRUD
每一步操作会得到唯一的Ext.data.Operation实例，他包含了所有的请求参数
1、数据代理Proxy目录结构
Ext.data.proxy.Proxy 代理的根类（他氛围客户端Client代理和服务器代理Server）
    Ext.data.proxy.Client 客户端代理
        Ext.data.proxy.Memory 普通的内存代理-------重点
        Ext.data.proxy.WebStorage 不能跨浏览器客户端存储代理
            Ext.data.proxy.SessionStorage 浏览器级别代理-------重点
            Ext.data.proxy.LocalStorage 本地化的级别代理（跨浏览器）------重点
    Ext.data.proxy.Server 服务器端代理
        Ext.data.proxy.Ajax 异步加载的方式-----重点
            Ext.data.proxy.Rest 一种特使的Ajax---知道
        Ext.data.proxy.JsonP 跨域交互的代理----重点跨域是有严重的安全隐患的，ExtJS的跨域也是需要服务器端做相应的配合
        Ext.data.proxy.Direct 命令
  3+方式的代理

在userData，可以用Ext.data.proxy.Memory里的data能够存储在memory里，然后被增删改查，就像个集合。

		Ext.define("user",{
			extend:"Ext.data.Model",
			fields:[
				{name:'name',type:'string'},
				{name:'age',type:'int'}
			]
		});
		//不用create方法我们直接用Proxy来创建对象数据
		var userData = [
			{name:'uspcat.com',age:1},
			{name:'yunfengcheng',age:26}
		];
		//创建model的代理类
		var memoryProxy = Ext.create("Ext.data.proxy.Memory",{
			data:userData,
			model:'user'
		});
		userData.push({name:'new uspcat.com',age:1});
		//更新
//		memoryProxy.update(new Ext.data.Operation({
//			action:'update',
//			data:userData
//		}),function(result){},this);
		//就可以做增删改查了
		memoryProxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			});
		});

如下的Storage，有各种sessionStorage、localhostStorage的存储方式；下面是Ajax的例子，person.jsp的内容是response.getWriter().write("{name:'uspcat.com'}");

		Ext.define('person', {
				extend:"Ext.data.Model",
			    fields: [{name:'name',type:'string'}]
			    
		});
		var ajaxProxy = new Ext.data.proxy.Ajax({
			url:'person.jsp',
			model:'person',
			reader:'json'
		});
		ajaxProxy.doRequest(new Ext.data.Operation({
			action:'read',
			limit:10,
			start:1,
			sorters:[
				new Ext.util.Sorter({
				property:'name',
				direcstion:'ASC'
			})]
		}),function(o){
			var text = o.response.responseText;
			alert(Ext.JSON.decode(text)['name']);
//			alert(o);
		});

第五讲
Reader:主要用于将Proxy数据代理读取的数据按照不同的规则进行解析，将解析好的数据保存到model中
结构图
Ext.data.reader.Reader 读取器的根类
  Ext.data.reader.Json JSON格式的读取器
   Ext.data.reader.Array 扩展JSON的Array读取器
  Ext.data.reader.Xml XML格式的读取器

Writer
结构图
Ext.data.writer.Writer
Ext.data.writer.Json 对象被解析成JSON的形势传到后台
Ext.data.writer.Xml 对象被解释成XML的形势传到后台

下面是关于JSon的Reader

(function(){
	Ext.onReady(function(){
		var userData = {
			total : 200,
			user : [{auditor:'tankun',info:{
				userID : '1',
				name : 'uspcat.com',
				//这里的orders对应着model里hasMany的那个model名而且是order。
				orders:[						
					{id:'001',name:'pen'},
					{id:'002',name:'book'}
				]
			}}]
		};
	
	//model
		Ext.regModel("user",{
			fields:[
				{name:'userID',type:'string'},
				{name:'name',type:'string'}
			],
			hasMany: {model: 'order'}
			
		});
		Ext.regModel("order",{
			fields:[
				{name:'id',type:'string'},
				{name:'name',type:'string'}
			],
			belongsTo:{type:'belongsTo',model:'user'}
		});
		
		//Ext.data.proxyMemory是一个简单的数据代理，它使用内存变量存取数据，因此每一次刷新页面之后数据都丢失。
		var mproxy = Ext.create('Ext.data.proxy.Memory', {
		    model: 'user',
		    data : userData,				//这个是存储到Memory的数据
		    reader:{
		    	type:'json',
		    	root:'user',				//这个以什么为主，这里是user为主，order为嵌套
		    	implicitIncludes : true,		//自动解析模型嵌套在其他模型的响应对象
		    	record:'info'				//看上面的user信息中，服务器返回的数据可能很复杂，用record可以筛选有用的数据信息，装载到Model中
		    }
		});
		
		mproxy.read(new Ext.data.Operation(),function(result){
			var datas = result.resultSet.records;
			Ext.Array.each(datas,function(model){
				alert(model.get('name'));
			});
			
			var user = result.resultSet.records[0];
			//本以为Orders是一个数组，其实不是的，是一个store。注意下面user.orders，其实是在raw下的。
			var sdf = user.orders();
			sdf.each(function(sdf){
				alert(sdf.get('name'));
			});
		});
	});
})();

下面是关于XML的Reader，以及对于array也是一样的就不多展示。

(function(){
	Ext.onReady(function(){
		Ext.regModel("user",{
			fields:[
				{name:'name'},
				{name:'id'}
			],
			proxy:{
				type:'ajax',
				url:'lession05/users.xml',
				reader:{
					type:'xml',
					record:'user'//这里是哪个XML文件的有效信息
				}
			}
		});
		
		var user = Ext.ModelManager.getModel('user');
		user.load(1,{
			success:function(model){
				alert(model.get('name'));
			}
		})
	});
})();

对于writer，是对数据进行提交，传递JSON或者XML等值得方式，如下

(function(){
	Ext.onReady(function(){
		Ext.regModel("person",{
			//下面是传递出去的值的model，以及传出方式。
			fields:[
				'name','age'
			],
			proxy:{
				type:'ajax',
				url:'lession05/person.jsp',
				writer:{
					//type:'json'
					type:'xml'
				}
			}
		});
		
		//下面是传递出去的值，Person的model，save的提交。根据上面的writer里的type进行传递值得方式。
		Ext.ModelMgr.create({
			name:'uspcat.com',
			age:1
		},'person').save();
		
		
	});
})();

第六讲
store是一个存储数据对象model的集合缓存，他可以为ExtJS的可视化组件提供数据（GridPanel,ComboBox）等类的结构
Ext.data.AbstractStore
Ext.data.Store  没有特殊情况这个类就可以满足日常的开发了
  Ext.data.ArrayStore
  Ext.data.DirectStore
  Ext.data.ArrayStore  内置辅助的类
  Ext.data.JsonStore  内置辅助的类
Ext.data.TreeStore

Ext.data.Store 使用
参数
  autoLoad(Boolean/Object):自动加载数据，自动调用load
  data(Array):内置数据对象的数组，初始化的是就要被装载
  model(Model):数据集合相关的模型
  fields(Field):字段的集合，程序会自动生成对的model
方法
  each(Function f, [Object scope]):void变量数据中的Model

(function(){
	Ext.onReady(function(){
//		Ext.define("person",{
//			extend:'Ext.data.Model',
//			fields:[
//				{name:'name'},
//				{name:'age'}
//			],
//			proxy:{
//				type:'memory'
//			}
//		});
		var s = new Ext.data.Store({
			fields:[
				{name:'name'},
				{name:'age'}
			],
//			data:[
//				{name:'uspcat.com',age:1},
//				{name:'yfc',age:26}
//			]
			proxy:{
				type:'ajax',
				url:'lession06/person.jsp'
			}
//			model:'person',
//			autoLoad:true
		});
//		底下这个方法不能遍历，是因为在Store加载Proxy的person.jsp的时候，因为这是异步的，所以
//		底下这个遍历，还没有加载成功。所以针对这样的方式，应当用load的方式。
//		s.each(function(model){
//			alert(model.get('name'));
//		});
		s.load(function(records,operation,success){
			Ext.Array.each(records,function(model){
//				alert(model.get('name'));
			});
//			s.filter('name',"yuhs");//这是一个过滤，只显示name=yuhs
			s.each(function(model){//由于完成了load，所以可以each遍历。
				alert(model.get('name'));
			});
			
			//下面这个是搜索的，下面的true之类的是参数，返回的index数据的位置。
			var index = s.find('name',"yuhs",0,false,true,false);
//			alert(index);
			
		});
		
		
	});
})();