动态载入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操作Excel处理数字类型的精度损失问题验证

    java操作Excel处理数字类型的精度损失问题验证: 场景: CELL_TYPE_NUMERIC-->CELL_TYPE_STRING--->CELL_TYPE_NUMERIC POI版 ...

  2. PHP - 递归函数

    /** * factorial($num) 计算阶乘 * @param string $num * @return string $total */ function factorial($num) ...

  3. javascript笔记整理（变量作用域）

    变量的作用域(作用域:指的就是一段代码的作用范围) 一.变量的作用域 1.全局变量(在代码中任何地方都能够访问得到的变量,拥有全局的作用域) A.最外层函数外面定义的变量 var a=1; funct ...

  4. Linux服务器使用SSH的命令（有详细的参数解释）

    前一阵远程维护Linux服务器,使用的是SSH,传说中的secure shell. 登陆:ssh [hostname] -u user 输入密码:***** 登陆以后就可以像控制自己的机器一样控制它了 ...

  5. 利用FFT 计算生成离散解析信号

    通常我们用到的信号都是实值信号,但是我们可以根据这个实信号构造出一个复信号,使得这个复信号只包含正频率部分,而且这个复信号的实部正好就是我们原来的实值信号.简单的推导可知,复信号的虚部是原信号的希尔伯 ...

  6. 在VC++中使用Tab Control控件

    系统环境:Windows 7软件环境:Visual Studio 2008 SP1本次目的:在模态或非模态对话框中使用Tab Control控件,及引申在单/多文档中使用 查阅MSDN文档,对于创建T ...

  7. android 按字母搜索

    在看Oplayer的时候看见滑动字母来实现listView的内容搜索,所以就把里面的核心的函数扣除来做了一个demo,分为两部分一个是布局,另一个就是代码了,具体的如下: 布局: <?xml v ...

  8. spring中bean的一些知识点

    知识点1: 实例化bean的3种方法. 1.      使用类构造器 (90%用这个方法) 2.      使用静态工厂方法 3.      使用实例化工厂 知识点2: 看这段代码 Applicati ...

  9. asp.net2.0安全性(1)－－用户角色篇(代码实现1)--转载来自车老师

    创建用户: MembershipCreateStatus mc; Membership.CreateUser(txtUid.Text, txtPwd.Text, txtEmail.Text, txtQ ...

  10. EasyUI - ComboBox 下拉组件

    效果: html代码: <input id ="comb" name ="comb"/> JS代码: $(function () { $('#com ...