Extjs学习----------动态加载js文件（减轻浏览器的压力）

动态加载js文件可以减轻浏览器的压力，本例使用了Ext.window.Window组件，该组件的学习地址：http://blog.csdn.net/z1137730824/article/details/38538277

具体实现步骤：

（1）建立dynamic.jsp文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



  
    （2）建立dynamic.js和MyWindow.js文件，注意路径

       

文件具体内容：
dynamic.js
Ext.onReady(function(){
	//动态加载js文件步骤：
	//1、在js/extjs/添加文件夹(ux)，在ux文件夹中添加自己的文件
	//2、在js/extjs/ux中编写扩展的组件
	//3、启用Ext的动态加载机制，设置加载路径
	//4、创建类的实例并使用
	
	Ext.Loader.setConfig({
		enabled:true,
		paths:{//可以加载多个js
			myux:&＃39;js/extjs/ux&＃39;//要加载的js所在的路径
		}
	});
	//创建实例
	Ext.create(&＃39;js.extjs.ux.MyWindow&＃39;,{
		title:&＃39;修改动态加载组件的标题&＃39;
	}).show();
	
});
MyWindow.js

//define的类名，一点要严格按照包层次路径去编写
Ext.define(&＃39;js.extjs.ux.MyWindow&＃39;,{
		extend:&＃39;Ext.window.Window&＃39; , //继承Ext的window类
		title:&＃39;我是动态加载进来的组件&＃39;,
        width:300,    //这是窗体的宽度  
        height:&＃39;50%&＃39;, //高度和宽度值可以是数值型的，也可以是字符串型，用字符串型的比较好  
        layout:       //布局  
        {  
            type: &＃39;fit&＃39;//Auto(默认),card,fit,hbox,vbox,anchor,table  
//                  align: &＃39;left&＃39;  
        },  
        plain:true,//设置窗口背景为透明  
        constrain:true,//设置窗口不超出浏览器边界  
//              constrainHeader:true,//设置窗口的标题不超出窗口的边界，标题之外可以超出  
        modal:true,//设置窗口时模态窗口  
        icon:&＃39;js/extjs/icons/icon.png&＃39;,//设置图标，值为图标的路径  
//              iconCls:&＃39;&＃39;,//CSS样式  
        x:50,   //设置窗体在浏览器中显示的位置  
        y:50,  
        autoScroll:true,//当窗体中的内容很多的时候显示滚动条  
        html:&＃39;这是窗体中显示的文字&＃39;,//窗体中显示的文字，可以使Html文本  
        renderTo:Ext.getBody()//新创建的组件渲染到什么位置  
});
（3）启动服务器进行测试

结果：



打开FireFox控制台，选择网络，查看加载：