• Extjs学习----------动态载入js文件(减轻浏览器的压力)


    动态载入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:'我是动态载入进来的组件',
            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控制台,选择网络,查看载入:



  • 相关阅读:
    求每天的收入和支出
    行列 转换 合并 分拆
    用户消费总金额 2000以下 20004000 40006000 查询连续数字,统计个数
    txt文件分割导入数据库
    字符串分割函数拆分成多行
    如何向一个自增字段插值
    sql中带in条件的查询及提高效率
    逐行计算、逐行递延、逐行更新
    SQL2005实现全文检索的步骤 停止数据库的用户连接
    查字段指定数据后一行记录
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/5126214.html
Copyright © 2020-2023  润新知