6、ExtJs——Ext基础架构--认识Ext.js和Ext-more.js

认识Ext.js 和Ext-more.js 
首先,我们要知道这2个js文件的作用,这俩个文件包含了Ext的一些基础定义、基本的属性和方法,

•Ext.js方法详解:
–  Ext.apply&Ext.applyIf
–  Ext.extend
–  typeOf
–  isEmpty、isIterable、isFunction、isArray...
–  Iterate
•Ext-more.js方法详解
–  getBody
–  getHead
–  getDoc
–  getScrollBarWidth
–  destroy

Ext的apply和applyIf方法:

Ext.onReady(function(){
//Ext.js
//	Ext.apply()  //:就是为对象扩展属性或方法的
	var src = {name:'zhangsan',age:30};  //源对象
	var config = {name:'lisi',sex:'男'};  //配置对象
	
//------------------------------------------------	
	/**
	Ext.apply(src,config);
	
	//name:lisi   age:30   sex:男  ,apply:config会覆盖src
	for(var attr in src){
		alert(attr + ':' +src[attr]);
	}
	*/
//-------------------------------------------------	
	Ext.applyIf(src,config);
	//name:zhangsa age:30  sex:'男'  ,applyIF:config不会覆盖src
	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 u = Ext.create('User');
	Ext.override(u,{
		say:function(){
			alert('我是覆盖后的');
		}
	});
	u.say();
	
//---------------------------------------------
	//Ext-more.js
	Ext.getBody()
	
Ext对于原生的javascript对象进行了一些列的扩展,把握好这些扩展,能更深刻体会Ext的架构,这些扩展的js源码在src/core/src/lang目录下,

6、ExtJs——Ext基础架构--认识Ext.js和Ext-more.js_第1张图片

共7个

ExtJs扩展原生JavaScript
- Ext.Object
- Ext.Number
- Ext.String
- Ext.Array
- Ext.Funtion
- Ext.Date
- Ext.Error

Ext.onReady(function(){
	//Ext对于原生javascript对象的扩展
//--------------------------------------------------------	
	//Ext.Object
	//-----------------------------------------------------
	//1:chain 把当前传入的对象 当成新创建对象的原型
	/**
	var obj = {
		name:'dfsa',
		age:10		
	};
	
	var result = Ext.Object.chain(obj);
	alert(result.name);
	alert(result.age);
	
	alert(result.hasOwnProperty('name'));  //alert false
	*/
	//-------------------------------------------------------
	//2:each 遍历当前对象 然后回调函数中暴漏出三个属性key、value、self,如果回调函数返回false停止迭代
	/**
	var obj = {
		name:'zhangsa111',
		age:20,
		sex:'nan'
	};
	Ext.Object.each(obj,function(key,value,self){
		alert(key + ':' + value);
		if(obj.age == 20){
			return false;
		}
	});
	*/
	//-------------------------------------------------------------
	//3:fromQueryString( queryString, [recursive] )
	/**
	var str = 'name=dsfa&age=30';
	var obj = Ext.Object.fromQueryString(str);
	alert(Ext.encode(obj));
	*/
	//---------------------------------------------------------
	//4:getKey
	/**
	var person = {
   	 	name: 'Jacky',
   	    loves: 'food'
	};

    alert(Ext.Object.getKey(person, 'food')); // alerts 'loves'
	*/
	//----------------------------------------------------------
	//5:toQueryObjects
	/**
	var obj = {
		name:'张三',
		age:50,
		fav:{
			fav1:'sleep',
			fav2:'play',
			fav3:'eat'
		}
	};
	var arr = Ext.Object.toQueryObjects('user',obj,true);
	console.info(arr);
	*/
	//----------------------------------------------------------
	//6:toQueryString
	/**
	var obj = {
		name:'zdsad',
		age:20
	};
	var str = Ext.Object.toQueryString(obj);
	alert(str);   //alert name=zdsad&age=20  可以形成查询条件,即http:.../.jsp?name=zdsad&age=20
	*/
//---------------------------------------------------------------------------
	//Ext.Number
	//1:constrain
//	alert(Ext.Number.constrain(5,1,20));
	
	//2:randomInt
//	alert(Ext.Number.randomInt(1,100));

	//3:toFixed
//	alert(Ext.Number.toFixed(3.1415926,4));
	
//---------------------------------------------------------------------------	
	//Ext.String
//	alert(Ext.String.capitalize('edsad'));
	
//	alert(Ext.String.ellipsis('www.asdfgh.com',8));   //alert  www.a...
	
//---------------------------------------------------------------------------
	//Ext.Array
	//1:clean
	/**
	var arr = [1,2,null,3,''];
	alert(Ext.Array.clean(arr));
	*/
	//2:difference
	/**
	var arr1 = [1,2,3];
	var arr2 = [2,5,6];
	alert(Ext.Array.difference(arr1,arr2));
	*/
	//3:each
	/**
	var arr3 = [1,2,3];
	Ext.Array.each(arr3,function(item){
		alert(item);
		if(item >=4){
			return false;
		}
	});
	*/
	//4:erase 从指定位置开始删除指定数量元素
//	var arr = [1,2,3,4,5];
//	alert(Ext.Array.erase(arr,2,2));  //alert  [1,2,5]
	
	//5:every
	/**
	var arr = [1,2,5,6,9,10];
	var flag = Ext.Array.every(arr,function(item){
		if(item >= 7){
			return false;
		}else{
			return true;
		}
	});
	alert(flag);        //false
	*/
	//6:filter
	/**
	var arr = [1,2,5,6,9,10];
	var newarr = Ext.Array.filter(arr,function(item){
		if(item > 8){
			return false;
		}else{
			return true;
		}
	});
	alert(newarr);         //alert [1,2,5,6]
	*/
	
	//7:include
	/**
	var arr = [1,2,3,4];
	Ext.Array.include(arr,20);
	alert(arr);             //alert [1,2,3,4,20]
	*/
	
	//8:unique
	/**
	var arr = ['a',2,3,4,5,6,5,4,3,2,'a','b'];
//	alert(Ext.Array.unique(arr));  //alert[1,2,3,4,5,6]
	
	//利用js对象的特性去掉数组的重复项     利用obj的key是不重复的
	var obj = {};
	for(var i = 0,len = arr.length; i < len ; i++){
		obj[arr[i]] = true;  //去掉数组的重复项了
	}
//	alert(Ext.encode(obj));	
	var uniquearr = [];
	for(var i in obj){
		if(obj.hasOwnProperty(i)){
			uniquearr.push(i);
		}
	}
	alert(uniquearr);
	*/
	
	//function    alias  bind  defer
	//为方法起别名
	/**
	var obj = {
		name:'dfsafds',
		say:function(){
			alert(this.name);
		}
	};
	var objsay = Ext.Function.alias(obj,'say');
	objsay();
	*/
	//bind 绑定作用域  就相当于call  apply
	/**
	var color = 'red';
	var obj = {
		color:'blue'
	};
	function showColor(){
		alert(this.color);
	}
	Ext.Function.bind(showColor,obj)();
	*/
	//defer  类似window.setTimeout
	/**
	function task(){
	alert('执行');
	};
	Ext.Function.defer(task,3000);  //3秒后执行task
	*/
//------------------------------------------------------------
	//Date
	//between
//	alert(Ext.Date.between(new Date(2014,07,05),new Date(2014,07,01),new Date(2014,07,09))); //alert true
	
	//format
//	alert(Ext.Date.format(new Date(),'Y-m-d H:i:m'));
	
	//parse
//	alert(Ext.Date.parse('2014-08-09 21:41:09','Y-m-d H:i:m').toLocaleString()); //格式年必须Y,时必须H,大写

//------------------------------------------------------------------
	//Ext.Error
	Ext.Error.raise('you are wrong');
});




你可能感兴趣的:(网页前台技术)