网上或者书上的例子里大都是把tab项渲染到一个div中，
这对于在每个Tab页里加载一个页面的情况就不适合了
用ifame加载不同的页面应该是最合适的方式
网上也有用ifame显示子项的例子，
是把每一个子项都渲染成了一个ifame
感觉这样有问题，因为切换TabPanel的子项时，子页面不刷新
可能是因为每个ifame里对应的内容都都加载到了主页面，再切换时就不重新加载页面了
同时发现ifame对应的页面里再有js弹出窗口的话，窗体的返回值也取不到
而且采用这种方式，文档结构树上会有多个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" href="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/ext-all.js"> </script> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/source/locale/ext-lang-zh_CN.js"> </script> <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/extjs2.0/resources/images/default/s.gif'; var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"":"供货信息","url":"":"物流信息","url":"http://www.163.com"}]'; 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>附图：
后来经过反反复复的测试，终于整理出了一个个人感觉比较好的解决方案
这样页面上只有一个iframe ，加载iframe 内容页面正常。
代码如下
<!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" href="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/resources/css/ext-all.css" /> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/adapter/ext/ext-base.js"> </script> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/ext-all.js"> </script> <script type="text/javascript" src="http://blog.163.com/baihongtao_618/blog/http://www.cnblogs.com/extjs2.0/source/locale/ext-lang-zh_CN.js"> </script> <script type="text/javascript"> Ext.onReady(function(){ Ext.BLANK_IMAGE_URL = 'http://www.cnblogs.com/extjs2.0/resources/images/default/s.gif'; var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"":"供货信息","url":"":"物流信息","url":"http://www.163.com"}]'; 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>
