How to load other complete pages using IFRAME in extjs tabpanel

You need to use the tabpanel tab of ext to load two complete pages a few days ago. I checked it online and saw this article.Article: "Ext. tabpanel first formula ". This article explains how to load the tabpanel of other complete pages with IFRAME ". However, only one page is loaded, and a "Link" outside the tabpanel is clicked during page switching, and The onclick event is used for processing. Apparently, it does not meet the requirements. However, this article also gave me directions and taught me how to use tabpanel. You can follow this idea.

The first method:

Write an example based on the article and the API documentation of extjs. The procedure is as follows:

Note: Here I only paste the most importantCodeFor the introduction method of the extjs Library and the files to be introduced, refer to "go deep into ext JS (version 2)-learning notes". You can add secondary code by yourself.

1. first introduce the extjs library in the page. Add the following code to the index. jsp Body Tag:

Note: store keyindex. jsp and alarmindex. jsp in the same directory of the index. jsp file. The content of these two files can be filled out at will. You only need to be able to separate them.

2. Add the tabpanel generation code to the script tag of the index. jsp file (Note: This tag should be placed behind the script tag that introduces the extjs library. As follows:

Ext. onready (function (){
VaR firstactive = true; // handle the automatic execution of event listening during loading.
VaR kpitab = new Ext. tabpanel ({
Renderto: 'kpitab ',
Activetab: 0,
Height: 438, // set the height of the tabpanel tab. This height can be omitted when viewport layout is used.
Frame: True,
Items :[
{
Contentel: "keyframe ",
Title: "key information ",
Closable: false
},
{
Contentel: "alarmframe ",
Title: "warning information ",
Closable: false
}
],
Listeners :{
'Tabchange': function (TP, panel ){
If (firstactive) {// handle the automatic execution of event listening during loading. Let's stop executing the first load.
Firstactive = false;
} Else {
Document. getelementbyid ('armframework'). style. Display = 'block ';
}
}
}
});
});

This tab correctly loads two complete pages.

Note the following two problems:

① In IFRAME id = "" alarmframe "...... Style = "overflow: hidden; display: none;" ", I set the actual attribute of this label to: Display: none. In this case, if I do not set it to hide, after loading, the content of the two IFRAME files will be processed on the page. This does not meet the requirements. Because it is set to hide. Therefore, you need to add event processing. Change its real attributes to visible. In addition, the question "the content of both IFRAME will be on the page" is only available after loading is complete and before the tab is switched for the first time. After one tab is switched, no more. Therefore, you only need to set the page to visible when switching the tab for the first time.

② Because the event listening of tabpanel is automatically executed during loading. At this time, I do not need to set IFRAME id = "alarmframe" to visible. Therefore, you need to handle the event in a special way. Detailed handling method. See the code.

Obviously, this method is insufficient, mainly to add event listening. At the same time, you must first hide the page. I believe there will be better implementations. Java-Javascript