动态载入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 标准库 urllib2 的使用细节

    道可叨 | Python 标准库 urllib2 的使用细节 request = urllib2.Request(uri) request.add_header('User-Agent', 'fake ...

  2. 2014年国内经常使用移动client推送服务介绍和比較

    经过5年移动互联网的迅速发展,如今推送服务方面国内已经出现了非常多产品,比如极光推送,个推,一推,百度推送,友盟推送等,我们在选择推送服务时,首先排除了付费的推送服务,重点调查了免费的推送服务.   ...

  3. Route@书写规则的总结

    路由书写规则的总结 概念:Routing System由一组路由组成,每一个路由规则可以匹配一种类型的URL,在请求过来的时候,Ruting ystem 就用它来处理这个URL,路由的任务就是匹配UR ...

  4. RESTFul Shiro

    RESTFul与服务没有关系?REST的本质是设计风格,不是技术. REST的URL还是个URL,就是个普通的URL,访问这个URL的时候,先被Servlet Filter(即Shiro 的Filte ...

  5. windows下建立文件的换行符^M导致linux下的shell脚本执行错误的解决方式

    常常在windows下编辑的文件远程传送到linux下的时候每行末尾都会出现^M.这将导致shell脚本执行错误,主要是由于dos下的编辑器和linux下的编辑器对文件末行的回车符处理不一致导致. 主 ...

  6. ios基础-编程规范

    养成良好的编程习惯,是開始一门新语言的首要前提. (一)文档结构规范 1.建立Libs目录,存放第三方库 2.建立Tools目录,存放自己封装的类库 3.建立ViewControllers目录,存放全 ...

  7. 把VS2010的智能代码提示和注解从英文变成中文

    最近安装了个高级点的VS2010,起初还没留意.今天无意发现提示信息只能提示英文.....头大oooo. 我以为是个别现象,于是GG了下,发现有很多盆友都有这种. 记录下来了,以后省事儿: 访问MS的 ...

  8. hdu 4117 GRE Words （ac自动机 线段树 dp）

    参考:http://blog.csdn.net/no__stop/article/details/12287843 此题利用了ac自动机fail树的性质,fail指针建立为树,表示父节点是孩子节点的后 ...

  9. delphi json（CDS包含了Delta数据包）

    在delphi中,数据集是最常用数据存取方式.因此,必须建立JSON与TDataSet之间的互转关系,实现数据之间通讯与转换.值得注意的是,这只是普通的TDataset与JSON之间转换,由于CDS包 ...

  10. Silverlight技术调查(4)——完成的调查结果

    原文 Silverlight技术调查(4)——完成的调查结果 客户端使用Silverlight+DXperience,可以在线编辑各种常见文本及富文本文档(doc.docx.rtf.txt.html… ...