动态载入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+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    <title>My JSP '1HelloWorld.jsp' starting page</title>

	<meta http-equiv="pragma" content="no-cache">

	<meta http-equiv="cache-control" content="no-cache">

	<meta http-equiv="expires" content="0">

	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

	<meta http-equiv="description" content="This is my page">

	<!--

	<link rel="stylesheet" type="text/css" href="styles.css">

	-->

	<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">

	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-all-debug.js"></script>

	<script type="text/javascript" charset="utf-8" src="js/extjs/ext-lang-zh_CN.js"></script>

	<script type="text/javascript" charset="utf-8" src="MyExt4Study/dynamic.js"></script>

  </head>

  <body>

  </body>

</html>

（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:'js/extjs/ux'//要载入的js所在的路径

		}

	});

	//创建实例

	Ext.create('js.extjs.ux.MyWindow',{

		title:'修修改态载入组件的标题'

	}).show();

});

MyWindow.js

//define的类名，一点要严格依照包层次路径去编写

Ext.define('js.extjs.ux.MyWindow',{

		extend:'Ext.window.Window' , //继承Ext的window类

		title:'我是动态载入进来的组件',

        width:300,    //这是窗体的宽度

        height:'50%', //高度和宽度值能够是数值型的，也能够是字符串型，用字符串型的比較好

        layout:       //布局

        {

            type: 'fit'//Auto(默认),card,fit,hbox,vbox,anchor,table

//                  align: 'left'

        },

        plain:true,//设置窗体背景为透明

        constrain:true,//设置窗体不超出浏览器边界

//              constrainHeader:true,//设置窗体的标题不超出窗体的边界。标题之外能够超出

        modal:true,//设置窗体时模态窗体

        icon:'js/extjs/icons/icon.png',//设置图标。值为图标的路径

//              iconCls:'',//CSS样式

        x:50,   //设置窗体在浏览器中显示的位置

        y:50,

        autoScroll:true,//当窗体中的内容非常多的时候显示滚动栏

        html:'这是窗体中显示的文字',//窗体中显示的文字。能够使Html文本

        renderTo:Ext.getBody()//新创建的组件渲染到什么位置

});

（3）启动server进行測试

结果：



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

Extjs学习----------动态载入js文件（减轻浏览器的压力）的更多相关文章

  1. 为了提高性能，怎样动态载入JS文件

    超级表格是一款多人协作的在线表格.程序相当复杂,用到十几个JS文件. 可是有些文件是在打开某些类型的表格时才须要载入. 比如,仅仅有当打开甘特图表格时,才须要载入gantetu.js文件. 那么问题来 ...

  2. asp.net后台代码动态添加JS文件和css文件的引用

    首先添加命名空间 using System.Web.UI.HtmlControls; 代码动态添加css文件的引用 HtmlGenericControl myCss = new HtmlGeneric ...

  3. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

  4. 如何调试异步加载的js文件（浏览器调试动态加载js）

    描述 1:jQuery->var obj= new $.js_Obj():等异步加载js文件,执行方法. obj.method(): 2:页面估计不变,通过声明不同的js文件,进行页面内容的转换 ...

  5. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  6. js文件被浏览器缓存的思考

        我们的用户量大,修改js文件后,用户反馈登录出现问题.实际上刷新一下就没事了.就是因为用户的浏览器使用的还是本地缓存的js代码.   强制刷新一般就会重新去服务器获取新的js代码.但不能让用户 ...

  7. js文件被浏览器缓存

    如果修改了js文件中的js代码,发布代码到线上后.用户的浏览器使用的还是原来js缓存.所以并不会马上生效. 如何才能让浏览器使用最新的js文件呢? 我去看了一下淘宝,发现也是这样一种方式额,不知道对不 ...

  8. 动态添加js文件.

    方法一: $.getScript(url,callback); 这个方法是对$.ajax({ })的封装.默认是异步的而且是带有缓存的. 缓存对于用户来说,是个好东西,但是对于开发者来说可就是日了狗的 ...

  9. 动态添加JS文件到页面

    /*** ** 功能: 加载外部JS文件,加载完成后执行回调函数callback ***/ var utools = { config: { id: "", url: " ...

随机推荐

  1. java 随机数的生成

    生成10个不小于100000的6位数 public static void main(String[] args) { Random random = new Random(); for (int i ...

  2. Hadoop源代码导入Eclipse

    须要进一步学习hadoop.须要看看内部源代码实现.因此须要将hadoop源代码导入都eclipse中,简单总结一下,详细过程例如以下: 首先确保已经安装了git.maven3.protobuf2.5 ...

  3. 一张图说清Asp.NET MVC中的 RenderPage、RenderBody、RenderSection

  4. perl malformed JSON string, neither tag, array, object, number, string or atom, at character offset

    [root@wx03 ~]# cat a17.pl use JSON qw/encode_json decode_json/ ; use Encode; my $data = [ { 'name' = ...

  5. 基于visual Studio2013解决面试题之1310随机数

     题目

  6. 基于visual Studio2013解决面试题之1101差值最小

     题目

  7. Mina airQQ聊天 服务端篇（二）

    Mina聊天服务端实现思路:在用户登录的时候.连接服务端而且验证登录用户,假设成功,则将IoSession保存到map<账号,IoSession>中,而且通知该用户的好友上线,然 后再请求 ...

  8. 从M个数中随机选出N个数的所有组合，有序，（二）

    这就是数学中的 A m n 的选取. 共有   m!/n!种可能.. 同样举一个例子吧.. 从12345这五个数字中随机选取3个数字,要求选出来的这三个数字是有序,也就是说从12345中选出来的是12 ...

  9. openfire数据库中文乱码问题

    1.首先数据库的编码设置为UTF-8 2.项目的编码也要设置为UTF-8 假设数据保存到数据库的时候还有乱码  就要改动openfire配置文件 在openfire主文件夹\conf\openfire ...

  10. Python的字符串格式化符号

    1.字符串格式化符号含义 %c:格式化字符及其ASCII码 %s:格式化字符串 %d:格式化整数 %o:格式化无符号八进制数 %x:格式化无符号十六进制数 %X:格式化无符号十六进制数(大写) %f: ...