关于extjs中动态添加TabPanel的tab项并以iframe显示的整理(转)
出處:http://blog.163.com/baihongtao_618/blog/static/1423479702012392948830/
?近來的項目中用到了Extjs 的TabPanel,這也是Extjs最基本，最常用的組件了
網上或者書上的例子里大都是把tab項渲染到一個div中，
這對于在每個Tab頁里加載一個頁面的情況就不適合了?
用ifame加載不同的頁面應該是最合適的方式?
?
網上也有用ifame顯示子項的例子，
是把每一個子項都渲染成了一個ifame
感覺這樣有問題，因為切換TabPanel的子項時，子頁面不刷新
可能是因為每個ifame里對應的內容都都加載到了主頁面，再切換時就不重新加載頁面了
同時發現ifame對應的頁面里再有js彈出窗口的話，窗體的返回值也取不到
而且采用這種方式，文檔結構樹上會有多個iframe！
加載多ifame的代碼如下：
?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<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":"http://www.baidu.com"},{"id":"fromInfo","text":"供貨信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","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" "http://www.w3.org/TR/html4/strict.dtd">
<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":"http://www.baidu.com"},{"id":"fromInfo","text":"供貨信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","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>
?
轉載于:https://www.cnblogs.com/smileberry/archive/2012/09/10/2679004.html
總結
以上是生活随笔為你收集整理的关于extjs中动态添加TabPanel的tab项并以iframe显示的整理(转)的全部內容，希望文章能夠幫你解決所遇到的問題。
