ExtJS4.2的学习

最新推荐文章于 2018-07-25 09:10:35 发布
最新推荐文章于 2018-07-25 09:10:35 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： 学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tankun2011/article/details/25752081
版权

第一讲 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);
			
		});
		
		
	});
})();





 

 

 

 

 

 

 

 

 

 

坤哥的洋葱头
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Extjs4.2中文教程
10-04
Extjs4.2入门教程详解，及API文档。
ExtJS 学习心得（一）
weixin_30312557的博客
10-19 141
一个偶然的机会，我发现了ExtJS框架，第一次看到其创建出来的效果时，简直兴奋死我啦，呵呵，没想到还有这么漂亮的UI控制，但使用起来却感觉不太爽，其一大缺点就是所带的类库太庞大啦，会比较影响速度，而且帮助文档全部是英文，英文的也还好啦，更重要的是其文档并没有相关的例子，只是列出来使用参数，让人很难掌握，只好去他们的官方论坛到处问人，郁闷！ 不过还好，外国人一般都比较热情，基本上问的问题都有人...
ExtJS4.2学习(1)——初识ExtJS
weixin_34026276的博客
08-28 558
一、浅谈ExgJS发展历史 要想深入了解某一项事物，最好的方式就是首先了解它的历史。Ext的发展比较有特色，其实一开始Ext并非是从零开发的。它是由JackSlocum基于雅虎的YUI技术，通过参考JavaSwing等机制来开发成的这么一种纯javascript框架，这货其实一开始并不叫ExtJS，一开始叫YUI-Ext，其实这哥们一开始也没想到Ext能火，不过“事与愿违”，这货超乎寻常...
ExtJS 4.2 教程-07：Ext.Direct
weixin_30387423的博客
08-26 128
转载自起飞网，原文地址：http://www.qeefee.com/extjs-course-7-Ext-Direct ExtJS 4.2 教程-01：Hello ExtJS ExtJS 4.2 教程-02：bootstrap.js 工作方式 ExtJS 4.2 教程-03：使用Ext.define自定义类 ExtJS 4.2 教程-04：数据模型 ExtJS 4.2 教程-05：客...
ExtJS 4.2 介绍
X9X9X9X9的专栏
07-11 1691
摘要: 　　Ext JS4.2 纳入了很多令人激动的提升和特点。你可能已经在其他文章中了解到一部分，如：Grid控件的改进。本文经讨论新主题海王星（Neptune Theme）和对从右到左（RTL）的支持。Neptune　　欢迎“Neptune”主题来 ... Ext JS4.2 纳入了很多令人激动的提升和特点。
EXTJS4.2学习入门教程
05-30
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
ExtJS4.2学习API及样例
04-30
里面有demo以及API说明，可以当工具书以及学习使用
extJs4.2学习笔记
01-06
### extJs4.2 学习笔记 #### 1. Panel 组件 Panel 是 ExtJS 中最基础且功能强大的容器之一。它具有多种属性和方法，可以用来创建各种类型的界面元素，例如弹出框、对话框等。在给定代码示例中，Panel 的创建如下：...
EXTjs4.2中文版
12-01
在文档方面，"脚本娃娃 (Ext4.1.0 Doc中文版 V1.0.0 Beta)"这个文件很可能是EXTjs4.1版本的中文文档，虽然不是4.2版本的，但依然可以为EXTjs4.2的学习提供基础参考。EXTjs的官方文档通常详细介绍了每个类、方法、...
extjs 4.2 开发 参考书
05-17
ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。它提供了一套完整的组件库，包括数据管理、图表、表格、菜单、工具栏等，...通过结合书籍内容和源码学习，将能更全面地掌握ExtJS 4.2的开发技巧。
EXT.js4.2实战
10-17
EXT.js4.2实战EXT.js4.2实战EXT.js4.2实战EXT.js4.2实战
extjs学习文档
04-01
extjs学习文档，应用实例, 帮助文档 。收藏保存，以后用得上。
ExtJS4.2版本完整版
06-17
ExtJS4.2版本完整版，里面例子什么都有！分享分享
ExtJs 4.2
tumi
07-25 427
环境搭建 Ext下载， （需要注册）使用版本为4.2.0，可使用现有项目已下载文件。 Sencha Cmd下载，根据系统下载，可能依赖ruby(版本193)，ruby下载,用于编译的sass文件。 构建项目 使用sencha cmd 生成Ext应用 ,运行构建应用   sencha -sdk /path/to/sdk generate app M...
ExtJS学习(1)
WangZhaoRui90的博客
11-24 379
1.模仿 Js 的 alert. 2.ExtJS对原生的JS的扩展 Array 的 every()方法 Array 的 filter()方法 Array 的 contains()方法 Array 的 toArray()方法
EXTJS 学习
anderberte
07-12 516
目录 (1)箭头样式 (2)treenode 自定义样式 (3)Ext.tree.TreePanel 的title,root 配置项必须指定,不然图像在IE中显示混乱; loader配置项不指定,不显示图像.  (4)Extjs 日期的使用方法(显示,接收,定义,提交) (5)Extjs 三个主要文件错误的引用, 浏览器无法显示Extjs效果. (6)gridpanel加态重新加载c
EXt js 学习笔记总结
gaoqiao1988的专栏
05-25 994
1. get 、 fly、 getCmp 、getBody 、getDoc 、getDom、、    get-----ExtJs获取节点、dom、提供缓存机制  Ext.Element类是Ext对DOM的封装 get是Ext.Element.get的简写    fly-----    getCmp----用来获得一个Ext组件，已经在页面中初始化了的Component或其子类的对象，ge
ExtJs学习（一）
Martix
05-26 1049
1、首先下载ExtJs库文件，要应用ExtJs则在页面要引入一下三个文件： 2、在ExtJs库文件及页面加载完后，ExtJs会执行onReady中的指定函数，因此，一般情况下，ExtJs应用都从onReady开始的。 一个简单的HelloWorld弹出框例子：主要用到Ext.MessageBox.alert()函数; Ext.onReady(fu
extjs4.2 Form表单 提交
最新发布
06-07
提交 ExtJS 4.2 Form表单有两种方式：通过表单的submit()方法提交和通过Ajax请求提交。 1. 通过表单的submit()方法提交 ``` Ext.getCmp('formId').submit({ url: 'yourUrl', method: 'POST', success: function(form, action) { // 成功后的操作 }, failure: function(form, action) { // 失败后的操作 } }); ``` 2. 通过Ajax请求提交 ``` Ext.Ajax.request({ url: 'yourUrl', method: 'POST', params: Ext.getCmp('formId').getValues(), success: function(response) { // 成功后的操作 }, failure: function(response) { // 失败后的操作 } }); ``` 其中，`Ext.getCmp('formId').getValues()` 方法可以获取表单的所有值，也可以通过 `Ext.getCmp('formId').getForm().getValues()` 方法获取表单的所有值。在提交表单时，需要设置提交的URL和提交方式，提交成功后执行success回调函数，失败后执行failure回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值