动态载入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. python中打印文件名,行号,路径

    print "I have a proble! And here is at Line: %s"%sys._getframe().f_lineno PDB,哈哈http://doc ...

  2. ESRI Shapefiles (SHP)

    ESRI Shapefiles (SHP) Also known as ESRI ArcView Shapefiles or ESRI Shapefiles. ESRI is the company ...

  3. 超级坑人的Couchbase数据库问题!!!

    官网:http://www.couchbase.com/ 版本:1.8版 问题描述: 某次服务器因意外断电重启后,就进入不了Couchbase控制台,显示 "无法显示该页" 的错误 ...

  4. C陷阱与缺陷代码分析之第2章语法陷阱

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 陷阱1 理解函数声明 作者提出一个问题:有一个首地址为0的函数,该函数返回值类型为void,没有参数.怎样用C语言的 ...

  5. The parent project must have a packaging type of POM

    在Eclipse中使用Maven添加模块时报错:The parent project must have a packaging type of POM 解决办法: 是将pom.xml 中的  < ...

  6. Eclipse用法和技巧三：自动生成Main方法2

    上一篇文章里面介绍了新建文件时候自动添加main方法,这里接着介绍自动联想main方法.       步骤一:输入"main” 步骤二:保持光标在上图位置,按ALT + /,再回车 上一篇文 ...

  7. Cocos2d-x教程第(11)讲－利用遮罩(蒙版)CCLayerColor制作新手引导界面(上)

    欢迎转载,转载时请注明原文出处:http://blog.csdn.net/u012945598/article/details/17280019 源码下载地址:http://download.csdn ...

  8. TODO管理工具TaskWarrior （跨平台C++代码）

    Taskwarrior 是一个基于命令行的 TODO 列表管理工具.主要功能包括:标签.彩色表格输出.报表和图形.大量的命令.底层API.多用户文件锁等功能. http://www.oschina.n ...

  9. 找到程序真正的入口（使用IDE追踪）

    一.程序的真正入口 main或WinMain只是“语法规定的程序入口” 并不是“应用程序入口”. 我们使用VC++ 6.0 的栈回溯功能,找到main函数之前的代码.菜单View -> Debu ...

  10. 基于visual Studio2013解决C语言竞赛题之1062高与矮

       题目 解决代码及点评 /************************************************************************/ /* 62 ...