论坛首页 Web前端技术论坛

请问Ext的Ext.TabPanel支持iframe吗

浏览 17565 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-08-11  
  我原来使用 dhtmlxTabbar,这个控件对Tab页的支持真是一流的棒,几乎所有的需要都可以得到满足,比较你可以让一个Tab页对应一个iframe,这样Tab页中内容的提交就可以不影响其它Tab页了。
  下面是dhtmlxTabbar控制使用 iframe模式的代码:
        
         //创建一个tabbar
         tabbar=new dhtmlXTabBar("content","top");
        tabbar.setImagePath("/imgs/");
        tabbar.setStyle("modern");
        tabbar.setHrefMode("iframes");//每一个Tab页对应一个新的iframe

        //添加一个Tab页
         vat tabId = "1",tabName="tab1";
        tabbar.addTab(tabId,tabName,"100px",0);
        _targetUrl = "http://www.baobaotao.com";
        tabbar.setContentHref(tabId,_targetUrl);

   我试了Ext的Tab控件,目前我还没有发现可以一个Tab页对应一个iframe的,不知道是否可以支持一个
Tab页一个iframe。请有知道的朋友赐教,谢谢。
   发表时间:2007-08-11  
  我现在使用BorderLayout和BasicLayoutRegion以及ContentPanel共同完成了支持iframe Tab页,
没有使用Tab控件。我们知道EXT的Layout的每一个区都可以放置多个ContentPanel,当放置多个ContentPanel,相应的区域会自动出现Tab页。只要在ContentPanel中放置一个iframe就可以了。我写了一个方法用于向center域添加Tab页,每个Tab页对应一个iframe:
        var openedTabMap = new col.JSMap();
        function openUrlInTabbar(tabId,tabName,targetUrl){
             var region = layout.getRegion('center',contentPanel);
             if(!openedTabMap.containsKey(tabId)){
                 var tabFrame = Ext.DomHelper.append( document.body,{tag: 'iframe',  frameBorder: 0, src: targetUrl,name:'Frame_'+tabId,style:'width:100%,height:100%'});
                 var contentPanel = new Ext.ContentPanel(tabFrame, {title:tabName,fitToFrame:true, closable: true});     
                 region.add(contentPanel);

                 openedTabMap.put(tabId,contentPanel);
             }else{
                 region.showPanel(openedTabMap.get(tabId));
             }
            
        }

    现在有一个问题是,这个Tab页标签出现在区域的底部,而不是顶部,不知道能否通过参数设置,改变Tab页标签的位置。有相关经验的朋友,请说出您的经验,谢谢。
  
  
 
0 请登录后投票
   发表时间:2007-08-12  
   TabContent也可以用iframe了,呵呵,是这样的:
 
var tabs = new Ext.TabPanel('content');  
  var tabFrame =  Ext.DomHelper.append(document.body,
               {tag: 'iframe',id:'frame1',
                frameBorder: 0,scrolling:'no', 
                src: targetUrl,name:'Frame_2',
                style:'width:600px,height:400px'}); 
   var tab = tabs.addTab('frame1','标签名','',true);

  不过我觉得非常慢,我还是决定使用dhtmlxTabbar。
0 请登录后投票
   发表时间:2007-08-12  
不是Ext.TabPanel
而是Ext.TabPanelItem

setUrl
引用
public function setUrl( String/Function url, [String/Object params], [Boolean loadOnce] )
Set a URL to be used to load the content for this TabPanelItem.
0 请登录后投票
   发表时间:2007-08-12  
tab还是用ajax好点
0 请登录后投票
   发表时间:2007-08-17  

引用
现在有一个问题是,这个Tab页标签出现在区域的底部,而不是顶部,不知道能否通过参数设置,改变Tab页标签的位置。


这样设置就可以了:

		,center: { 
                titlebar: false
                ,autoScroll:false
                ,tabPosition: 'top'
                ,closeOnTab: true
                ,alwaysShowTabs: true
                ,resizeTabs: true
		}
0 请登录后投票
   发表时间:2007-08-18  
fangzhouxing 写道

引用
现在有一个问题是,这个Tab页标签出现在区域的底部,而不是顶部,不知道能否通过参数设置,改变Tab页标签的位置。


这样设置就可以了:

		,center: { 
                titlebar: false
                ,autoScroll:false
                ,tabPosition: 'top'
                ,closeOnTab: true
                ,alwaysShowTabs: true
                ,resizeTabs: true
		}

   Very Great!
0 请登录后投票
   发表时间:2007-08-20  
请问楼主,在EXT的tabs中放置一个grid,是不是也要用iframe?
0 请登录后投票
   发表时间:2007-08-22  
gavin213 写道
请问楼主,在EXT的tabs中放置一个grid,是不是也要用iframe?

对啊,我都是放iframe,这样Tab页中的页面比较独立,不然一定要用ajax提交,比较麻烦。

   不过我发现在一个EXT区域中放入过多的iFrame Region,用一段时间后,Region中的IFrame的表单组件就会失效了,无法接受光标。看来EXT 1.1还是比较不稳定啊。另外,发现EXT真的太慢了,切换一个TAB页都觉得有延时,什么时候才能够改进一下呢?不然我都没有信心在我们项目中使用EXT的大部分功能了(现在只用到Layout)。
0 请登录后投票
   发表时间:2007-08-22  
stamen 写道
gavin213 写道
请问楼主,在EXT的tabs中放置一个grid,是不是也要用iframe?

对啊,我都是放iframe,这样Tab页中的页面比较独立,不然一定要用ajax提交,比较麻烦。

   不过我发现在一个EXT区域中放入过多的iFrame Region,用一段时间后,Region中的IFrame的表单组件就会失效了,无法接受光标。看来EXT 1.1还是比较不稳定啊。另外,发现EXT真的太慢了,切换一个TAB页都觉得有延时,什么时候才能够改进一下呢?不然我都没有信心在我们项目中使用EXT的大部分功能了(现在只用到Layout)。

不要在Tabs用iframe,用XHR返回HTML片断并打开执行脚本
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics