在ext 1.1 中 实现tabpanel加iframe很是简单,只要使用如下代码就可以在一个tabpanel加入一个iframe
Ext.DomHelper.append(document.body,

...{tag:'iframe',id:id,
frameBorder:0,scrolling:'auto',
src:url,name:id,
style:'width:100%;height:600px;'});
returntabFrame;
varszPanel=viewport.findById(id);
if(szPanel==null)

...{

szPanel=newExt.Panel(...{
id:id,
title:t,
closable:true,
layout:'fit',

items:[newExt.ux.IFrameComponent(...{id:id,url:url})]
});
tabs.add(szPanel); 这里有个地方要注意 layout:'fit'这个选项是必须的不然ifame 就不知道在哪了
Ext.DomHelper.append(document.body,
...{tag:'iframe',id:id,
frameBorder:0,scrolling:'auto',
src:url,name:id,
style:'width:100%;height:600px;'});
returntabFrame;
然而在ext2.0中使用该代码怎么都不显示效果,而且代码也不抱错.郁闷了很久,最后终于在老外的一个论坛上找到了解决方案
首先在 ext-all.js 拉到最后插入代码
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});
}
})
然后在页面中可以这么调用
varszPanel=viewport.findById(id);
if(szPanel==null)
...{
id:id,
title:t,
closable:true,
layout:'fit',
items:[newExt.ux.IFrameComponent(...{id:id,url:url})]
});
tabs.add(szPanel); 这里有个地方要注意 layout:'fit'这个选项是必须的不然ifame 就不知道在哪了
本文介绍如何解决Ext2.0中TabPanel加载Iframe的问题,包括在ext-all.js文件中添加自定义组件Ext.ux.IFrameComponent的具体步骤,并展示了如何通过设置layout为'fit'来正确展示iframe。
1245

被折叠的 条评论
为什么被折叠?



