在Tab中不是很好实用Iframe,提供两种参考方式:
一:单一的tab,每次左边的tree的node事件都会更新的。
先创建一个拥有HTML的标签
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
new Ext.TabPanel({
id:'main-tabs',
activeTab:0,
region:'center',
margins:'39 5 5 0',
resizeTabs:true,
tabWidth:150,
deferredRender:true,
layoutOnTabChange:true,
defaults:{autoScroll: true},
items:[
{
id:'main-view',
title:'Loading
',
tag: 'iframe',
autoHeight:true,
autoScroll:true,
autoWidth:true,
frame:true,
html:'<iframe id="HelloIframe" src="module/ComplainAll.html" width="100%" height="800" frameborder="0" scrolling="auto"></iframe>'
}]
})
]
}); 在每次更新的时候更新src目标
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var tree = Ext.getCmp('Complain-tree');
tree.on('append', function(tree, p, node){
if(node.id == 1001){
node.select.defer(100100, node);
}
});
var sm = tree.getSelectionModel();
sm.on('beforeselect', function(sm, node){
return node.isLeaf();
});
function LoadTab(nodetext,nodeid){
var centerpanel = Ext.getCmp('main-tabs');
var tabs=Ext.getCmp('main-view');
tabs.setTitle(nodetext);
if(nodeid == 100100){
Ext.get('HelloIframe').dom.src="module/ComplainAll.aspx";
}else if(nodeid == 100101){
Ext.get('HelloIframe').dom.src="module/Replay.aspx";
}else
Ext.get('HelloIframe').dom.src="hello.aspx";
centerpanel.setActiveTab(tabs);
}
sm.on('selectionchange', function(sm, node){
Ext.getCmp('main-view').setTitle(node.text);
LoadTab(node.text,node.id)
}); 二、这种方式显得比较professional一点
首先对BoxComponent进行扩展:
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent, {
onRender : function(ct, position){
this.el = ct.createChild({tag: 'iframe', id: 'iframe-'+ this.id, frameBorder: 0, src: this.url});
}
}); 这样tab就比较简单一点了。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
var tab = center.add({
id : node.id,
iconCls : "tabicon",
xtype : "panel",
title : node.text,
closable : true,
layout : "fit",
frame : true,
items: [ new Ext.ux.IFrameComponent({ id: node.id+"panel", url: "../Search.aspx" }) ]
});
center.setActiveTab(tab); 关于这个的详细信息可以参考:http://www.extjs.com/forum/showthread.php?t=18144
和http://www.extjs.com/forum/showthread.php?p=54322#post54322
不在多说!
Best Wishes!