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