extjs html页面刷新,关于extjs的tabpanel加载tab项并且tab项以iframe显示时的页面刷新问题...

网上或者书上的例子里大都是把tab项渲染到一个div中，

这对于在每个Tab页里加载一个页面的情况就不适合了

用ifame加载不同的页面应该是最合适的方式

网上也有用ifame显示子项的例子，

是把每一个子项都渲染成了一个ifame

感觉这样有问题，因为切换TabPanel的子项时，子页面不刷新

可能是因为每个ifame里对应的内容都都加载到了主页面，再切换时就不重新加载页面了

同时发现ifame对应的页面里再有js弹出窗口的话，窗体的返回值也取不到

而且采用这种方式，文档结构树上会有多个iframe！

加载多ifame的代码如下：

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: ' '

}]

});

for (var j = 1; j < oTabs.length; j++) {

var oItem = {};

oItem.id = oTabs[j].id;

oItem.title = oTabs[j].text;

oItem.html = ' '

tabs.add(oItem);

}

}

else {

document.getElementById("tabsContent").style.display = "none";

}

});

附图：

后来经过反反复复的测试，终于整理出了一个个人感觉比较好的解决方案

这样页面上只有一个iframe，加载iframe 内容页面正常。

代码如下

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";

}

});