动态载入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. Ajax的三种实现及JSON解析

    本文为学习笔记,属新手文章,欢迎指教!! 本文主要是比较三种实现Ajax的方式,为以后的学习开个头. 准备: 1.  prototype.js 2.  jquery1.3.2.min.js 3.  j ...

  2. JVM调优总结（三）-基本垃圾回收算法

    可以从不同的的角度去划分垃圾回收算法: 按照基本回收策略分 引用计数(Reference Counting): 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数. ...

  3. 基于visual Studio2013解决算法导论之003雇佣问题

     题目 雇用问题 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #in ...

  4. C++ map排序（按照value值排序）_glp_hit_新浪博客

    C++ map排序(按照value值排序)_glp_hit_新浪博客     C++ map排序(按照value值排序)    (2012-07-12 14:19:51)    转载▼    标签:  ...

  5. 娓娓道来c指针 (0)c语言的梦魇：c指针

    (0)c语言的梦魇:c指针 序 c语言中有一个重点:c指针.它也是一个难点.当然,这是一句废话:重点往往也是难点.在c标准中,对指针的定义是这种: 指针的类型是derived from其他类型,也就是 ...

  6. C# 中 双问号??的用法

    int? x = null;int y = x ?? -1; 这里的y不能为null,但是等于x,x为null时赋值给y会报错.?? 可以在x==null时对y赋值-1 更多相关资料:https:// ...

  7. Hashtable的使用

    Hashtable mylist = new Hashtable();             mylist.Add("1", "100");          ...

  8. 基于visual Studio2013解决C语言竞赛题之1043求末尾0个数

       题目 解决代码及点评 /* 43. 求n!的末尾有多少个零.可以通过检查n!含有多少个10的因数来求它末尾零的个数. 因为10=2×5,在n!中含有2的因数显然多于含有5的因数. 一 ...

  9. 关于 iOS 基础动画

    1,首先,在iOS中,动画有2种,一种是对 UIView 做动画处理,另一种是对 CALayer做动画. 这里我们先要搞清楚 UIView 与 CALayer 之间的关系,UIView 是界面的基础元 ...

  10. Android应用开发学习笔记之BroadcastReceiver

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 一.BroadcastReceiver机制概述 Broadcast Receiver是Android的一种“广播发布 ...