"Original" ExtJS non-IFRAME Frame load page Implementation __js

In the use of Ext development app, the general framework is the left side of the menu bar, the middle of the tab-style display area. The tab page is mostly embedded with an IFRAME to display the content. However, the use of IFRAME has a big drawback is that each time the load a new IFRAME will be the core of ext js,css file reload. Because ext is a huge class library, the volume of these files are very large, just ext-all.js has more than 400 K, so the use of an IFRAME loaded to reduce the efficiency greatly. In order to solve this problem, I recommend using the Ext.panel autoload mode to load the page. Loading with this mode can avoid the problem of the EXT core file reloading. Can improve the operation efficiency of the program very well. Here's a brief introduction to the process and principles of implementation, as well as the problems I have encountered in development and how to solve these problems.

Several technical points of this pattern are

1. Click on the menu event implementation.
2. How to write the page that will be loaded.
3. How to get the height and width of the control that loads the page to adapt, such as Panel,grid.


Implementation of menu Events
This function requires three parameters,
A. Module number, this number is custom, do not and must be unique. In the menu click event to pass this number over, as the tab page ID
B. The URL of the module's Url,tab sub-page AutoLoad
C. The name of the module, title of the tab sub page
The code is as follows:

function AddTab (id,link,name) {
var tabid = "tab-" +ID; Modify the ID slightly.
var tabtitle = name;
var tablink = link;

var centerpanel = ext.getcmp (' Displaycenterpanel ');
var tab = centerpanel.getcomponent (tabid);//Get Tab Build

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: "In the page load, please wait ...",
timeout:9000,
Scripts:true
});

}else{
Centerpanel.setactivetab (tab);
}
}

How to write the page that will be loaded
<%@ 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 files to use
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>


The height and width of the controls that load the page are adaptive
Because this type of page loaded with AutoLoad mode does not change with the size of the browser. So we want to implement the browser's size change function, that is, the Window.onresize event.
But in the implementation of this event, we must add settimeout to control it, let it delay the implementation of a moment, otherwise it can not achieve our results.
A function that controls the size of the tab page container
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);
}

}


}
To perform allcomresize functions by window.onresize Events to control the tab container's size
var otime;
Window.onresize = function ()
{
if (otime)
{
Cleartimeout (Otime);
}
Otime = settimeout ("Allcomresize ()", 100); Delayed 100 millisecond execution
}