Ext2.0中tab+iframe的配置

 以前使用ext 1.1 结合一些需求做一个左边树，右边tab,然后可以支持多tab的效果，实际上每个tab里面放的是一个iframe.注意：这里目前最好的办法还是放iframe,使用ajax获取动态页内容还是不能很好的解决一些问题.当然很多网友谈到过使用iframe产生的内存泄露，其实这是一些浏览器或者操作系统本身的bug.

   在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;'} );
                 return  tabFrame;

 

然而在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});
     }
})

 

然后在页面中可以这么调用

  var  szPanel = viewport.findById(id);
             if (szPanel == null )
             ... {
               szPanel=new Ext.Panel(...{
                    id:id,
                    title:t,
                    closable:true,
                    layout:'fit',
                    items: [ new Ext.ux.IFrameComponent(...{ id: id, url: url }) ]
               });
                  tabs.add(szPanel);  这里有个地方要注意 layout:'fit'这个选项是 必须的     不然ifame 就不知道在哪了