ExtJs非Iframe框架加载页面实现
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域。而tab页面大多采用的嵌入一个iframe来显示内容。但是采用iframe方式有一个很大的弊端就是每次在加载一个新的iframe时都要将Ext的核心js,css文件重新加载。由于Ext是一个庞大的类库,这些文件的体积都很庞大,仅仅是ext-all.js就有400多k,所以用iframe方式加载就大大降低了效率。为了能解决这个问题,我推荐使用Ext.Panel的autoload模式进行加载页面。用这种模式加载就可以避免Ext核心文件重新加载的问题。可以很好的提高程序的运行效率。以下我简单介绍一下实现的过程和原理,以及我在开发是遇到的问题和如何解决这些问题。
这种模式的几个技术点在于
1.菜单的点击事件实现?
2.将要加载的页面该如何编写?
3.如何让加载页面的控件的高度和宽度自适应,比如Panel,grid?
菜单事件的实现
这个函数需要三个参数,
a.模块编号,这个编号是自定义的,别且一定要唯一。在菜单点击事件中要把这个编号传过来,作为tab子页的id
b.模块的url,tab子页autoload的url
c.模块的名称,tab子页的title
代码如下:
function addtab(id,link,name){
var tabId = "tab-"+id; //为id稍作修改。
var tabTitle = name;
var tabLink = link;
var centerpanel = Ext.getCmp('displayCenterPanel');
var tab = centerpanel.getComponent(tabId);//得到tab组建
var subMainId = 'tab-' + id + '-main';
if(!tab){
tab = centerpanel.add(
new Ext.Panel({
id:tabId,
title:tabTitle,
//autoLoad:{url:tablink, scripts:true,nocache:true},
autoScroll:true,
iconCls:'tabIconCss',
layout: 'fit',
border:false,
closable:true
})
);
centerpanel.setActiveTab(tab);
tab.load({
url: tabLink,
method:'post',
params: {subMainId: subMainId},
scope: this, // optional scope for the callback
discardUrl: true,
nocache: true,
text: "页面加载中,请稍候……",
timeout: 9000,
scripts: true
});
}else{
centerpanel.setActiveTab(tab);
}
}
将要加载的页面该如何编写
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/WEB-INF/struts-tags.tld"%>
<%
String mainName = (String)request.getParameter("subWcid");
%>
<script>
/*
用到的js文件
1、../js/appjs/frontMg/exposure/exposure.grid.js
2、../js/appjs/frontMg/exposure/exposure.search.js
3、../js/appjs/frontMg/exposure/exposure.view.js
4、../js/appjs/frontMg/exposure/exposure.win.js
5、../js/appjs/frontMg/exposure/exposure.js
*/
var mainName = "<%=mainName%>";
var Front_exposure_ButtonIds = '<s:property value="funccode"/>';
</script>
<div id="<%=mainName%>-p" style="height:100%"></div>
<script language="javascript" type="text/javascript" src="../js/appjs/frontMg/exposure/exposure2.js"></script>
加载页面的控件的高度和宽度自适应
由于这种使用autoload模式加载进来的页面是不能随着浏览器的大小变化而变化的。所以我们要实现浏览器的大小变化函数,即window.onresize事件。
但是在实现这个事件的时候,一定要加上setTimeout来控制它,让其延迟一会儿执行,否则是不能达到我们的效果。
//控制tab页面容器大小的函数
function allComResize(){
var modelidarr = modelids.split(",");
var len = modelidarr.length;
if(len==0){
return false;
}
var w = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerWidth();
var h = Ext.getCmp('displayCenterPanel').getActiveTab().getInnerHeight();
for(var i=0; i<len;i++){
var tmpmodelid = modelidarr;
var subPage = Ext.getCmp("tab-"+tmpmodelid+"-main");
if(subPage){
subPage.setWidth(w);
subPage.setHeight(h);
}
}
}
//通过window.onresize事件来执行allComResize函数控制tab容器的大小
var oTime;
window.onresize = function()
{
if (oTime)
{
clearTimeout(oTime);
}
oTime = setTimeout("allComResize()", 100); //延迟100毫秒执行
}
原文地址:http://www.phpchina.com/bbs/viewthread.php?tid=97424
转载于:https://www.cnblogs.com/nikyxxx/archive/2010/03/15/1686499.html
ExtJs非Iframe框架加载页面实现相关推荐
- jquery 动态加载html,jQuery – 动态创建iframe并加载页面
[html] /** 弹出iframe页面(iframe后面会添加灰色蒙版) **/ function showIframe(url,w,h){ //添加iframe var if_w = w; va ...
- 关于ExtJS通过单击左边的treePanel在居中的panel加载页面问题
2019独角兽企业重金招聘Python工程师标准>>> 这几天整ExtJS通过单击treePanel在居中的panel加载页面问题.第一次加载的页面正常显示在panel中,但是从第二 ...
- 跳转,location.href,window.open(),load加载页面,iframe加载页面,兼容相关
跳转页面,兼容ios: window.location.href = ""; 跳转页面,ios无法跳转: window.open(); load加载页面: $("#&qu ...
- angular7中使用iframe来加载外部页面
在angular7中使用echarts的线性地图的时候,发现出来缩成了一团,暂未找到解决方案.但是在普通的html中直接引入并使用是没有问题的.因此,转换了思路,使用iframe来加载外部的html, ...
- js 判断iframe是否加载完毕
js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = funct ...
- 转:浏览器加载页面的过程与页面性能优化
本文是转帖,原文:http://www.baiduux.com/blog/2011/02/15/browser-loading/ 发布日期:2011年2月15日 作者:nwind 类别:HTML/CS ...
- vue 加载页面时触发时间_解析Vue项目的四个方面优化
在本篇文章里我们给大家整理了一篇关于优化VUE项目的四个总要点,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. 运行时优化 1.使用v-if代替v ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- web页面到ajax,页面使用ajax加载页面后如果运行其中的js,webpack如何多页面展示...
1.页面使用了sui-mobile这个框架,其中的页面路由部分会使用ajax加载页面.虽然每次都能加载到下一个页面,但是会出现加载到的页面中的js不去执行的情况. 2.页面打包使用了webpack,现 ...
最新文章
- 数字人民币解密:数字人民币的系统架构、产品形态是什么样的?
- 深入理解分布式技术 - 微服务为什么需要API 网关
- BERT 蒸馏在垃圾舆情识别中的探索
- 环境搭建:如何配置 vscode 远程开发 + 免密登录
- go 语言 mysql_Go语言基础之操作MySQL
- C++继承时名字的遮蔽
- hashmultimap java_【Java 学习笔记】 HashMultimap(guava)
- 爬虫练习:爬豆瓣读书的短评
- MongoDB联合查询 -摘自网络
- “CAIL 2021中国法律智能技术评测”第二赛段已全面开启!
- C/C++[结构体]
- 软考-中级-网络工程师-知识点个人总结(一)
- matlab矩阵指定行求和,在matlab中对矩阵元素求和的有效(最快)方法
- 聊聊前端框架——尤雨溪
- VueI18n国际化vm._watchers[0].constructor未定义的解决办法:修改源代码吧
- IELAB网络实验室 理解IGRP协议
- blob开头的文件无法下载怎么办
- 简单解读拼多多t.gif、tne.gif接口
- 1124: 成语接龙
- 序列密码知识整理(一 简介)