7、ExtJs——Ext基础架构--动态加载js文件--很重要

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使用的动态加载机制就是这里的原理。