学步园

Ext4.X提供的一大亮点就是Ext.Loader这个类的动态加载机制，只要遵循路径规范，即可动态加载js文件，方便把自己扩展组件动态加载进来，并减轻浏览器的压力。

关于动态加载机制，是在4.x中使用MVC模式一个必备的工作，学习好动态加载，以后去用Ext基于前台MVC模式下的开发至关重要。

定义并显示一个窗体，最原始的写法：

Ext.create('Ext.window.Window',{
		title:'fsdafsd',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
	}).show();

先定义一个自己的窗体类，然后再创建：

Ext.onReady(function(){
	//window组件
	/**
	Ext.create('Ext.window.Window',{
		title:'fsdafsd',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
	}).show();
	*/
	//Ext 的MVC
	
	//自己定义的一个类：MyWindow
	Ext.define('MyWindow',{
		extend:'Ext.window.Window',    //继承Ext.window.Window
		title:'fsdafsd',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
	});
	
	var w1 = Ext.create('MyWindow');
	var w2 = Ext.create('MyWindow',{
		title:'我是w2'
	});
	var w3 = Ext.create('MyWindow',{
		title:'我是w3'
	});
	w2.show();
});

将自己定义的类写在一个单独的js文件中，在js/Extjs/下新建文件夹 ux，创建MyEindow.js文件

//define的类名，一定要严格按照包的层次路径去编写
Ext.define('<span style="color:#ff0000;"><strong>js/ExtJs/ux/MyWindow</strong></span>',{
		extend:'Ext.window.Window',    //继承Ext.window.Window
		title:'我是动态加载进来的',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
});

动态调用这个js文件

Ext.onReady(function(){
	//window组件
	/**
	Ext.create('Ext.window.Window',{
		title:'fsdafsd',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
	}).show();
	*/
	//Ext 的MVC
	
	//自己定义的一个类：MyWindow
	/**
	Ext.define('MyWindow',{
		extend:'Ext.window.Window',    //继承Ext.window.Window
		title:'fsdafsd',
		height:300,
		width:400,
		constrain:true,
		modal:true,
		html:'窗体内容',
		renderTo:Ext.getBody()
	});
	
	var w1 = Ext.create('MyWindow');
	var w2 = Ext.create('MyWindow',{
		title:'我是w2'
	});
	var w3 = Ext.create('MyWindow',{
		title:'我是w3'
	});
	w2.show();
	*/
//-------------------------------------------
	//动态加载一个js文件，需要的时候在加载
	
	//第一步：在js/ExtJs/添加文件夹（ux）
	//在这个ux下新建一个结束文件并定义自己的类
	
	//第二步：在js/ExtJs/ux下编写自己的扩展组件（类）
	
	//第三步：启用Ext动态加载机制，并设置要加载的路径
	Ext.Loader.setConfig({
		enabled:true,
		paths:{
			ppd:'js/ExtJs/ux'
		}
	});
	
	//第四步：创建类的实例并使用
	Ext.create('js/ExtJs/ux/MyWindow').show();
	
	//Ext的requires和uses也可以动态加载
	
});

需要注意的是：

自定义类的文件其文件名要与类名完全一样，类的定义中，类名要包含路径层次，不能出错。

在ExtJs的MVC模式中，用到的requires 或 uses使用的动态加载机制就是这里的原理。