extJS--尚

ExtJS依赖JavaScript，JavaScript推荐两本书：《JavaScript高级程序设计》初阶阶段， 《JavaScript设计模式》中级阶段

fun1();//会调用fun1()方法 因为:function语句定义的形式，JavaScript解析器直接去找，先执行完成function定义的方法，其余代码从上到下按照顺序执行

function fun1() // 先 执行 function定义的方法
{

}

var fun2 = function( x )
{
	return x;
}

var fun3 = new Function('x','y','return x+y');
alert( fun3(20,30) );//显示 50

=========== arguments ================
function test( x,y,z )
{
	alert( arguments.length);//返回 3(有两个参数)
	alert( arguments[2]);//显示 3(第2个参数)
}
test(1,2,3);

==============================

　　

给Eclipse安装Spket的插件：

eclipse编写ExtJS有提示功能需要：sdk.jsb3文件：该文件在解压目录 build目录下：

==========================================

========================================================================================================

需要导入的extjs的文件：

=======================================================================================

/**
 * Ext.onReady 必须的准备函数 类似于 window.onload，但是加载时机跟靠前
 */
 Ext.onReady(function(){
 	// Ext 在这个方法里写
 	Ext.MessageBox.alert('提示信息','hello world');
 });

　　

===================== Ext 的文档查看方式  ===============

-------------------------------------------------------------------------------------------

================================= window 组件 ====================================================

Ext.window.Window

configs:
constrain:布尔值，true为限制窗口只能在其容器内移动，默认值为false，允许窗口在任何位置移动。(另：constrianHeader属性)
modal:布尔值，true为设置模态窗口。默认为false
plain：布尔值，true为窗口设置透明背景。false则为正常背景，默认为false
x、y ：设置窗口左上角坐标位置。
onEsc：复写onEsc函数，默认情况下按Esc键会关闭窗口。
closeAction：string值，默认值为'destroy'，可以设置'hide'关闭时隐藏窗口
autoScroll：布尔值，是否需要滚动条，默认false

html：String值

icon：String值(图片路径)

iconCls：String值(CSS的样式)

例如：

Ext.onReady(function(){

	//Ext.create方法相当于创建一个实例对象
	Ext.create('Ext.window.Window',{
		title:'我的第一个组件,window' ,
		width:400 , 	//Number型  也可以是字符串类型  width: '90%'
		height:300 ,
		layout:'fit' ,
		constrain:true ,		//限制窗口不超出浏览器边界
		modal:true ,			//设置一个模态窗口
		//plain:true ,
		icon:'js/extjs/icons/used/browser_window.png',				//字符串参数,图片的路径
		//iconCls:'' ,   		//CSS样式
		x:50 ,
		y:50 ,
		autoScroll:true,		//添加滚动条
		html:'<div style=width:200px;height:200px>我是一个div</div><div style=width:200px;height:200px>我是第二个div</div>' ,
		//constrainHeader:true,	//不允许该窗口的title超出浏览器边界
		renderTo:Ext.getBody()	//新创建的组件 渲染到什么位置
	}).show();

});

　　

 点击一个按钮 ,打开一个新的窗体 window重复创建的问题

Ext.onReady(function(){

	//ex001:点击一个按钮 ,打开一个新的窗体 window重复创建的问题
	//第一种实现
	//JQuery code: var btn = $('#btn'); var dombtn = btn.get(0);
	var btn = Ext.get('btn');		//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);
	btn.on('click',function(){
		if(!Ext.getCmp('mywin')){
			Ext.create('Ext.window.Window',{
				id:'mywin' ,		//如果你给组件加了一个id  那么这个组件就会被Ext所管理
				title:'新窗体' ,
				height:300 ,
				width:400 ,
				renderTo:Ext.getBody() //,
				//modal:true 使窗口模态窗口
			}).show();
		}
	});

	//第二种实现
//	var win = Ext.create('Ext.window.Window',{
//				title:'新窗体' ,
//				height:300 ,
//				width:400 ,
//				renderTo:Ext.getBody() ,
//				closeAction:'hide'  //closeAction默认是destroy
//	});
//
//	Ext.get('btn').on('click',function(){
//			win.show();
//	});

});

　　

在组件中添加子组件  ,并进行一系列针对于组件的操作

Ext.onReady(function(){

	//ex002 : 在组件中添加子组件  ,并进行一系列针对于组件的操作

	//在组件中添加子组件：
//	var win = new Ext.window.Window({
//		title:"添加子组件实例" ,
//		width:'40%' ,
//		height:400 ,
//		renderTo:Ext.getBody() ,
//		draggable:false , 	//不允许拖拽
//		resizable:false , 	//不允许改变窗口大小
//		closable:false, 	//不显示关闭按钮
//		collapsible:true ,	//显示折叠按钮
//		bodyStyle: 'background:#ffc; padding:10px;' , // 设置样式
//		html:'我是window的内容!!' ,
//		//Ext items(array) 配置子组件的配置项
//		items:[{
//			//Ext的组件 给我们提供了一个简单的写法	 xtype属性去创建组件
//			xtype:'panel',
//			width:'50%',
//			height:100 ,
//			html:'我是面板'
//		},
//		new Ext.button.Button({
//			text:'我是按钮' ,
//			handler:function(){
//				alert('执行!!');
//			}
//		})
////		{
////			xtype:'button' ,
////			text:'我是按钮',
////			handler:function(btn){
////				alert('我被点击了');
////				alert(btn.text);
////			}
////		}
//		]
//
//	});
//	win.show();	

	var win = new Ext.Window({
		id:'mywin' ,
		title:'操作组件的形式' ,
		width:500 ,
		height:300 ,
		renderTo:Ext.getBody() ,
		//表示在当前组件的top位置添加一个工具条
		tbar:[{			//bbar(bottom) lbar(leftbar)  rbar(rightbar)  fbar(footbar)
			text:'按钮1' ,
			handler:function(btn){
				//组件都会有 up、down 这两个方法(表示向上、或者向下查找) 需要的参数是组件的xtype或者是选择器
				alert(btn.up('window').title);
			}
		},{
			text:'按钮2' ,
			handler:function(btn){
				//最常用的方式
				alert(Ext.getCmp('mywin').title);
			}
		},{
			text:'按钮3' ,
			handler:function(btn){
				//以上一级组件的形式去查找 OwnerCt
				//console.info(btn.ownerCt);
				alert(btn.ownerCt.ownerCt.title);
			}
		}]
	});
	win.show();

});

　　

 用windowGroup(Ext.ZidexManager)对象去操作多个window窗口

Ext.onReady(function(){

	//ex003:用windowGroup对象去操作多个window窗口
	var wingroup = new Ext.WindowGroup();
	for(var i = 1 ; i <=5;i++){
		var win = Ext.create('Ext.Window',{
			title:'第' + i + '个窗口' ,
			id:'win_' + i ,
			width:300 ,
			height:300 ,
			renderTo:Ext.getBody()
		});
		win.show();
		wingroup.register(win);		//把窗体对象注册给ZindexManger
	}

	var btn1 = Ext.create('Ext.button.Button',{
		text:'全部隐藏' ,
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.hideAll();		//隐藏所有被管理起来的window组件
		}
	});

	var btn2 = new Ext.button.Button({
		text:'全部显示' ,
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.each(function(cmp){
				cmp.show();
			});
		}
	});

	var btn3 = new Ext.button.Button({
		text:'把第三个窗口显示在最前端' ,
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.bringToFront('win_3'); //把当前的组件显示到最前端
		}
	});	

	var btn4 = new Ext.button.Button({
		text:'把第五个窗口显示在最末端' ,
		renderTo:Ext.getBody(),
		handler:function(){
			wingroup.sendToBack('win_5');	//把当前的组件显示到最后
		}
	});		

});

　　

config、constructor

Ext.onReady(function(){

	//第12讲:config、constructor
	/*
	//在Ext中如何去定义一个类: Ext.define(className , properties , callback)
	Ext.define('Person',{
		//这里是对于这个类的一些配置信息
		//config属性 就是配置当前类的属性内容,并且会加上get和set方法
		config:{
			name:'z3' ,
			age: 20
		},
		//自己定义的方法
		say:function(){
			alert('我是方法...');
		},
		//给当前定义的类加一个构造器 ,目的就是为了初始化信息
		constructor:function(config){
			var me = this ;
//			for(var attr in config){
//				alert(attr + " : " + config[attr]);
//			}
			me.initConfig(config);	// 真正的初始化传递进来的参数
		}
	});

	//Ext.create 实例化一个对象
	var p = Ext.create('Person',{
		name:'王五' ,
		age:30
	});
	alert(p.getName());
	alert(p.getAge());
	p.say();
	*/

	//第13讲:extend 

	//Ext的继承代码
	/**
	//Sup Class
	Ext.define('Person',{
		config:{
			name:'bjsxt'
		} ,
		constructor:function(config){
			var me = this ;
			me.initConfig(config);
		}
	});
	//Sub Class
	Ext.define('Boy',{
		//使用Ext的继承
		extend:'Person',
		config:{
			sex:'男',
			age:20
		}
	});
	var b = Ext.create('Boy',{
		name:'张三',
		age:25
	});
	alert(b.name);
	alert(b.sex);
	alert(b.age);

	*/

	//javascript : prototype(原型)  :所有类的实例对象所共享
	/**

	function Person(name){
		this.name = name;
		//this.sayName = sayName ;
	};
//	function sayName(){
//		alert(this.name);
//	};
	Person.prototype.sayName = function(){
		alert(this.name);
	};

	var p1  = new Person('张三');
	p1.sayName();
	var p2  = new Person('李四');
	p2.sayName();
	alert(p1.sayName == p2.sayName);

	*/

	//javascript : prototype(原型)  :实现继承
	/**

	//SupClass
	var Person = function(name){
		this.name = name;
	};
	//alert(Person.prototype.constructor);		//原型对象的构造器,默认是当前的类的模板
	//SupClass prototype object
	Person.prototype = {
		constructor:Person ,
		id:100
	};

	//SubClass
	var Boy = function(name,sex,age){
		//借用构造函数继承的方式
		Person.call(this,name);
		this.sex = sex ;
		this.age = age ;
	};

	//实现原型继承: 继承了父类的模板和父类的原型对象
	//Boy.prototype = new Person();
	//自己实现extend的方法
	function myextend(sub , sup){
	        var F = function() {},		//定义一个空函数做为中转函数
	            subclassProto,			//子类的原型对象
	            superclassProto = sup.prototype;	//把父类的原型对象 交给了superclassProto变量

	        F.prototype = superclassProto;	// 做中转的位置：把父类的原型对象 赋值给了 F这个空函数的原型对象
	        subclassProto = sub.prototype = new F();	//进行原型继承
	        subclassProto.constructor = sub;		//还原构造器
	        sub.superclass = superclassProto;		//做了一个保存,保存了父类的原型对象
			//目的是为了防止你大意了
	        if (superclassProto.constructor === Object.prototype.constructor) {
	            superclassProto.constructor = sup;
	        }
	};
	myextend(Boy ,Person);
	var b = new Boy('李四','男',25);
	alert(b.name);
	alert(b.sex);
	alert(b.id);

	*/

	//第14讲:Ext.define 其他配置项

	//别名、备用名
	/**
	Ext.define("User",{
		config:{
			name:'bjsxt111' ,
			age:100
		},
		alias:'uu' ,//起别名	底层代码在Ext.ClassManger
		alternateClassName:'uuu',	//给当前类一个备用名 底层代码在Ext.ClassManger
		constructor:function(config){
			var me = this;
			me.initConfig(config);
		}
	});

	var u = Ext.create('uuu');
	alert(u.name);
	alert(u.age);
	*/

	//statics(子类不能继承) inheritableStatics(子类可以继承) 给当前类定义静态方法或属性

	/**
	Ext.define('Person',{
		config:{
			name:'我是父类'
		},
		statics:{	//静态的方法或属性
			static_id:'我是Person的id,不能被子类所继承!!'
		},
		inheritableStatics:{	//静态的方法或属性
			inheritableStatics_id:'我是Person的id,我可以被子类继承!!'
		},
		constructor:function(config){
			var me = this;
			me.initConfig(config);
		}
	});

	//一定注意:!!!!!//实例对象是无法使用静态属性或方法的
	//var p = Ext.create('Person');
	//alert(p.static_id);
	//用类名去使用静态属性:!!!!
//	alert(Person.static_id);
//	alert(Person.inheritableStatics_id);

	Ext.define('User',{
		extend:'Person' ,
		config:{
			age:20
		}
	});
	alert(User.static_id);
	alert(User.inheritableStatics_id);

	*/

	//mixins 混合的配置项,可以多继承的配置

	/**
	Ext.define("Sing",{
		canSing:function(){
			alert('cansing...');
		}
	});
	Ext.define("Say",{
		canSay:function(){
			alert('cansay...');
		}
	});
	Ext.define('User',{
		mixins:{
			sing:"Sing" ,
			say:"Say"
		}
	});

	var u = Ext.create("User");
	u.canSay();
	u.canSing();
	*/

	//^_^伪代码说明： requires 和 uses 以及  singleton
	/**
	Ext.define('MyComponent',{
		//可能需要Ext或者是其他的类做支持
		//requires加载需要的类时机是：当前类初始化之前被加载
		//requires:['Ext.window.Window','Ext.button.Button']
		//uses加载需要的类时机是：当前类初始化之后被加载
		//uses:['Ext.form.Panel','Ext.grid.Panel']
		//singleton:true	//当前的类就被当做一个单例对象
	});
	*/

});

　　

Ext.apply & Ext.applyIf

Ext.onReady(function(){

	//Ext.js

	//Ext.apply & Ext.applyIf

	/**
	//Ext.apply就是为对象扩展属性或方法的
	var src = {name:'张三',age:20};	//源对象
	var config = {name:'李四',sex:'男'};		//配置对象
	//Ext.apply(src , config);
	Ext.applyIf(src,config);		//如果当前对象存在属性,我就不进行copy 如果不存在则copy
	// name : '李四'  age : 20  sex:'男'
	for(var attr in src){
		alert(attr + " : " + src[attr]);
	}
	*/

	/**
	 *
	//Ext.extend
	//Ext.typeOf 和原生的javascript typeof
//	var str = '111';
//	var num = 20;
//	alert(Ext.typeOf(str));
//	alert(Ext.typeOf(num));
//	Ext.isArray()
//	var arr = [1,2,3,4];
//	Ext.iterate(arr,function(item){
//		alert(item);
//	});

	//Ext.override
//	Ext.define('User',{
//		say:function(){
//			alert('say....');
//		}
//	});
//	var user = Ext.create('User');
//	Ext.override(user,{
//		say:function(){
//			alert('我是覆盖后的say方法..');
//		}
//	});
//	user.say();

	 */

	//Ext-more.js

});

　　

如何创建一个Ext的类，创建类的复杂流程

定义类的方法：define

对于Ext4.X版本来说，采用了新定义类的define方法，而不是延续旧版本的extend方法，那么对于定义一个新的类。具体研究define的使用

Ext.define( classname,properties,callback);

---classname:要定义的新类的类名

---properties:新类的配置对象(Ext文档中 Class的配置项configs)

---callback:回调函数，当类创建完后执行该函数。

注解：对于Ext定义一个新的类。那么我们可以想象到。既然是利用Ext.define去创建类。那么创建的类一定是Ext所特有的类，不同于传统的JavaScript创建一个类，也就是我们要对define方法的第二个参数properties配置项进行配置，需要找到Ext对于类的支持的API进行配置

==========================================================

Configs配置项说明：

extends	用于继承
alias	类的别名
alternateClassName	备用名，与alias差不多
requires	需要使用到的类名数组，在动态加载时会根据该属性去下载类，注意需要的类是在当前类之前被加载
uses	与requires类似，但是被引用的类可以在该类之后才加载
constructor	构造器属性，一般用来初始化类的配置和调用其父类的方法
mixins	混入属性，多继承
config	定义类的配置项，会吧config里的每一个属性加上get和set方法
statics	定义静态方法，属性不能被子类继承
inheritableStatics	与statics类似，但是其属性可被子类继承
singleton	设置该类为单件模式

-----------------------------------------------------

 config、constructor

Ext.onReady(function(){

	//第12讲:config、constructor
	/*
	//在Ext中如何去定义一个类: Ext.define(className , properties , callback)
	Ext.define('Person',{
		//这里是对于这个类的一些配置信息
		//config属性 就是配置当前类的属性内容,并且会加上get和set方法
		config:{
			name:'z3' ,
			age: 20
		},
		//自己定义的方法
		say:function(){
			alert('我是方法...');
		},
		//给当前定义的类加一个构造器 ,目的就是为了初始化信息
		constructor:function(config){
			var me = this ;
//			for(var attr in config){
//				alert(attr + " : " + config[attr]);
//			}
			me.initConfig(config);	// 真正的初始化传递进来的参数
		}
	});

	//Ext.create 实例化一个对象
	var p = Ext.create('Person',{
		name:'王五' ,
		age:30
	});
	alert(p.getName());
	alert(p.getAge());
	p.say();
	*/
}

extend

Ext.onReady()
{
	//extend 

	//Ext的继承代码
	/**
	//Sup Class
	Ext.define('Person',{
		config:{
			name:'bjsxt'
		} ,
		constructor:function(config){
			var me = this ;
			me.initConfig(config);
		}
	});
	//Sub Class
	Ext.define('Boy',{
		//使用Ext的继承
		extend:'Person',
		config:{
			sex:'男',
			age:20
		}
	});
	var b = Ext.create('Boy',{
		name:'张三',
		age:25
	});
	alert(b.name);
	alert(b.sex);
	alert(b.age);

	*/

	//javascript : prototype(原型)  :所有类的实例对象所共享
	/**

	function Person(name){
		this.name = name;
		//this.sayName = sayName ;
	};
//	function sayName(){
//		alert(this.name);
//	};
	Person.prototype.sayName = function(){
		alert(this.name);
	};

	var p1  = new Person('张三');
	p1.sayName();
	var p2  = new Person('李四');
	p2.sayName();
	alert(p1.sayName == p2.sayName);

	*/

	//javascript : prototype(原型)  :实现继承
	/**

	//SupClass
	var Person = function(name){
		this.name = name;
	};
	//alert(Person.prototype.constructor);		//原型对象的构造器,默认是当前的类的模板
	//SupClass prototype object
	Person.prototype = {
		constructor:Person ,
		id:100
	};

	//SubClass
	var Boy = function(name,sex,age){
		//借用构造函数继承的方式
		Person.call(this,name);
		this.sex = sex ;
		this.age = age ;
	};

	//实现原型继承: 继承了父类的模板和父类的原型对象
	//Boy.prototype = new Person();
	//自己实现extend的方法
	function myextend(sub , sup){
	        var F = function() {},		//定义一个空函数做为中转函数
	            subclassProto,			//子类的原型对象
	            superclassProto = sup.prototype;	//把父类的原型对象 交给了superclassProto变量

	        F.prototype = superclassProto;	// 做中转的位置：把父类的原型对象 赋值给了 F这个空函数的原型对象
	        subclassProto = sub.prototype = new F();	//进行原型继承
	        subclassProto.constructor = sub;		//还原构造器
	        sub.superclass = superclassProto;		//做了一个保存,保存了父类的原型对象
			//目的是为了防止你大意了
	        if (superclassProto.constructor === Object.prototype.constructor) {
	            superclassProto.constructor = sup;
	        }
	};
	myextend(Boy ,Person);
	var b = new Boy('李四','男',25);
	alert(b.name);
	alert(b.sex);
	alert(b.id);

	*/
}

alias别名、alternateClassName备用名

Ext.onReady()
{
	//Ext.define 其他配置项

	//别名、备用名
	/**
	Ext.define("User",{
		config:{
			name:'bjsxt111' ,
			age:100
		},
		alias:'uu' ,//起别名	底层代码在Ext.ClassManger
		alternateClassName:'uuu',	//给当前类一个备用名 底层代码在Ext.ClassManger
		constructor:function(config){
			var me = this;
			me.initConfig(config);
		}
	});

	var u = Ext.create('uuu');
	alert(u.name);
	alert(u.age);
	*/
}

 statics(子类不能继承) inheritableStatics(子类可以继承) 给当前类定义静态方法或属性

Ext.onReady()
{

	//statics(子类不能继承) inheritableStatics(子类可以继承) 给当前类定义静态方法或属性

	/**
	Ext.define('Person',{
		config:{
			name:'我是父类'
		},
		statics:{	//静态的方法或属性
			static_id:'我是Person的id,不能被子类所继承!!'
		},
		inheritableStatics:{	//静态的方法或属性
			inheritableStatics_id:'我是Person的id,我可以被子类继承!!'
		},
		constructor:function(config){
			var me = this;
			me.initConfig(config);
		}
	});

	//一定注意:!!!!!//实例对象是无法使用静态属性或方法的
	//var p = Ext.create('Person');
	//alert(p.static_id);
	//用类名去使用静态属性:!!!!
//	alert(Person.static_id);
//	alert(Person.inheritableStatics_id);

	Ext.define('User',{
		extend:'Person' ,
		config:{
			age:20
		}
	});
	alert(User.static_id);
	alert(User.inheritableStatics_id);

	*/

}

mixins 混合的配置项,可以多继承的配置

Ext.onReady()
{
	//mixins 混合的配置项,可以多继承的配置

	/**
	Ext.define("Sing",{
		canSing:function(){
			alert('cansing...');
		}
	});
	Ext.define("Say",{
		canSay:function(){
			alert('cansay...');
		}
	});
	Ext.define('User',{
		mixins:{
			sing:"Sing" ,
			say:"Say"
		}
	});

	var u = Ext.create("User");
	u.canSay();
	u.canSing();
	*/
}

伪代码说明： requires 和 uses 以及  singleton

Ext.onReady()
{
	//^_^伪代码说明： requires 和 uses 以及  singleton
	/**
	Ext.define('MyComponent',{
		//可能需要Ext或者是其他的类做支持
		//requires加载需要的类时机是：当前类初始化之前被加载
		//requires:['Ext.window.Window','Ext.button.Button']
		//uses加载需要的类时机是：当前类初始化之后被加载
		//uses:['Ext.form.Panel','Ext.grid.Panel']
		//singleton:true	//当前的类就被当做一个单例对象
	});
	*/
}

Ext.js和Ext-more.js的深入解析。

Ext对原生JavaScript类的扩展

Ext操作DOM

Ext开始响应事件

认识Ext.js和Ext-more.js ， 这两个文件包含了Ext的一些基础定义，基本的属性和方法

Ext.onReady(function(){

	//Ext.js

	//Ext.apply & Ext.applyIf

	/**
	//Ext.apply就是为对象扩展属性或方法的
	var src = {name:'张三',age:20};	//源对象
	var config = {name:'李四',sex:'男'};		//配置对象
	//Ext.apply(src , config);
	Ext.applyIf(src,config);		//如果当前对象存在属性,我就不进行copy 如果不存在则copy
	// name : '李四'  age : 20  sex:'男'
	for(var attr in src){
		alert(attr + " : " + src[attr]);
	}
	*/

	/**
	 *
	//Ext.extend
	//Ext.typeOf 和原生的javascript typeof
//	var str = '111';
//	var num = 20;
//	alert(Ext.typeOf(str));
//	alert(Ext.typeOf(num));
//	Ext.isArray()
//	var arr = [1,2,3,4];
//	Ext.iterate(arr,function(item){
//		alert(item);
//	});

	//Ext.override
//	Ext.define('User',{
//		say:function(){
//			alert('say....');
//		}
//	});
//	var user = Ext.create('User');
//	Ext.override(user,{
//		say:function(){
//			alert('我是覆盖后的say方法..');
//		}
//	});
//	user.say();

	 */

	//Ext-more.js

});