Extjs non-IFRAME framework page loading implementation

When using ext to develop an app, the general framework is the left-side menu bar and the middle is the tab page display area. Most tab pages embed an IFRAME to display the content. However, the IFRAME method has a major drawback: each time a new IFRAME is loaded, the core JS and CSS files of ext must be reloaded. Because ext is a huge class library, these files are very large, only ext-all.js has more than 400 K, so the IFRAME method to load greatly reduce the efficiency. To solve this problem, we recommend using the autoload mode of Ext. Panel to load pages. Loading in this mode can avoid the re-loading of ext core files. It can improve the program running efficiency. Below I will briefly introduce the implementation process and principles, as well as the problems I encountered during development and how to solve these problems.

Several technical points of this mode are:

1. Menu Click Event implementation?
2. How to compile the page to be loaded?
3. How to Make the height and width of the control that loads pages adaptive, such as panel and grid?

Implementation of menu events
This function requires three parameters,
A. module number. This number is customized and must be unique. In the menu click event, you need to upload this number as the ID of the tab subpage.
B. Module URL, the URL of the tab sub-page autoload
C. Module name, the title of the tab subpage
The Code is as follows:

Function addtab (ID, Link, name ){
VaR Tabid = "tab-" + ID; // slightly modify the ID.
VaR tabtitle = Name;
VaR tablink = link;

VaR centerpanel = ext. getcmp ('displaycenterpanel ');
VaR tab = centerpanel. getcomponent (Tabid); // you can create a 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 );
// Page Loading Method
Tab. Load ({
URL: tablink, // URL address
Method: 'post', // post or get
Params: {submainid: submainid}, // pass the value
Scope: This, // optional scope for the callback
Discardurl: True,
Nocache: True,
Text: "loading the page. Please wait ...... ", // Prompt information before page loading
Timeout: 9000, // page loading timeout settings
Scripts: True // supports all DOM elements on the page
});

} Else {
Centerpanel. setactivetab (Tab );
}
}

How to compile the page to 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 used
1. ../JS/appjs/frontmg/exposure. Grid. js
2. ../JS/appjs/frontmg/exposure. Search. js
3. ../JS/appjs/frontmg/exposure. View. js
4. ../JS/appjs/frontmg/exposure. Win. js
5. ../JS/appjs/frontmg/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>

Adaptive height and width of controls for loading pages
Because the page loaded in the autoload mode cannot change with the browser size. Therefore, we need to implement the browser size change function, that is, the window. onresize event.
However, when implementing this event, you must add setTimeout to control it, so that it can be executed in a short time. Otherwise, the effect cannot be achieved.
// Function for controlling the container size on the tab page
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 );
}

}

}
// Use the window. onresize event to execute the allcomresize function to control the size of the tab container.
VaR otime;
Window. onresize = function ()
{
If (otime)
{
Cleartimeout (otime );
}
Otime = setTimeout ("allcomresize ()", 100); // execution with a latency of 100 milliseconds
}