您的位置：首页 > Web前端 > JavaScript

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

2016-01-13 09:13 627 查看

动态载入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控制台，选择网络，查看载入：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航