近來的項(xiàng)目中用到了Extjs 的TabPanel,這也是Extjs最基本，最常用的組件了
網(wǎng)上或者書上的例子里大都是把tab項(xiàng)渲染到一個(gè)div中，
這對(duì)于在每個(gè)Tab頁里加載一個(gè)頁面的情況就不適合了
用ifame加載不同的頁面應(yīng)該是最合適的方式
網(wǎng)上也有用ifame顯示子項(xiàng)的例子，
是把每一個(gè)子項(xiàng)都渲染成了一個(gè)ifame
感覺這樣有問題，因?yàn)榍袚QTabPanel的子項(xiàng)時(shí)，子頁面不刷新
可能是因?yàn)槊總€(gè)ifame里對(duì)應(yīng)的內(nèi)容都都加載到了主頁面，再切換時(shí)就不重新加載頁面了
同時(shí)發(fā)現(xiàn)ifame對(duì)應(yīng)的頁面里再有js彈出窗口的話，窗體的返回值也取不到
而且采用這種方式，文檔結(jié)構(gòu)樹上會(huì)有多個(gè)iframe！
加載多ifame的代碼如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/ext-all.js">
</script>
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/source/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":";
var oTabs = eval('(' + strTabs + ')');
if (oTabs != null && oTabs.length > 0) {
var tabs = new Ext.TabPanel({
renderTo: 'tabsContent',
activeTab: 0,
height: 700,
frame: true,
items: [{
id: oTabs[0].id,
title: oTabs[0].text,
html: ' <iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://blog.163.com/baihongtao_618/blog/' + oTabs[0].url + '"> </iframe>'
}]
});
for (var j = 1; j < oTabs.length; j++) {
var oItem = {};
oItem.id = oTabs[j].id;
oItem.title = oTabs[j].text;
oItem.html = '<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://blog.163.com/baihongtao_618/blog/' + oTabs[j].url + '"> </iframe>'
tabs.add(oItem);
}
}
else {
document.getElementById("tabsContent").style.display = "none";
}
});
</script>
</HEAD>
<BODY>
<div id="tabsContent" style="margin-top: 2px;">
</div>
</BODY>
</HTML>
附圖：
后來經(jīng)過反反復(fù)復(fù)的測試，終于整理出了一個(gè)個(gè)人感覺比較好的解決方案
這樣頁面上只有一個(gè)iframe ，加載iframe 內(nèi)容頁面正常。
代碼如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/ext-all.js">
</script>
<script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/../../extjs2.0/source/locale/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":";
var oTabs = eval('(' + strTabs + ')');
if (oTabs != null && oTabs.length > 0) {
document.getElementById("frmContent").src = oTabs[0].url;
var tabs = new Ext.TabPanel({
renderTo: 'tabsContent',
activeTab: 0,
collapsed: true,
items: [{
id: oTabs[0].id,
title: oTabs[0].text,
contentEl: 'tabItem'
}]
});
for (var j = 1; j < oTabs.length; j++) {
var oItem = {};
oItem.id = oTabs[j].id;
oItem.title = oTabs[j].text;
oItem.contentEl = 'tabItem';
tabs.add(oItem);
}
tabs.addListener("tabchange", function(tabs, nowtab){
for (var s = 0; s < oTabs.length; s++) {
if (oTabs[s].id == nowtab.id) {
document.getElementById("frmContent").src = oTabs[s].url;
break;
}
}
});
}
else {
document.getElementById("tabsContent").style.display = "none";
}
});
</script>
</HEAD>
<BODY>
<div id="tabsContent" style="margin-top: 2px;">
<div id="tabItem" style="width: 0px; height: 0px;">
</div>
</div>
<div id="tabItemsRender" style="height: 440px; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: #8DB2E3; border-right-style: solid; border-right-width: 1px; border-right-color: #8DB2E3; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #8DB2E3;">
<iframe id="frmContent" name="frmContent" src="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%">
</iframe>
</div>
</BODY>
</HTML>
聯(lián)系客服
