首页 新闻 搜索 专区 学院

TabPanel子页显示问题

0
[已关闭问题]

需要解决的问题如上图:

页面源码文件如下:

/*!
 * Ext JS Library 3.2.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */

Ext.onReady(function(){

    Ext.QuickTips.init();
   
   
    //=============================================================
    // BorderLayout
    //=============================================================

  var mytree = new Ext.tree.TreePanel({
         el:"tree-div",        
         autoScroll:true,
         autoHeight:true,
            animate:true,////展开动画效果
         expanded:true,//展开
         lines:true,//节点间的虚线条
         frame: true,// 美化界面
         leaf:false,//是否为叶子节点
         rootVisible:false,//是否显示根节点
         collapsible:false,//可折叠
         containerScroll: true,//否支持滚动条
         enableDD:true,//不仅可以拖动,还可以通过Drag改变节点的层次结构
         enableDrag:true,//树的节点可以拖动Drag
         trackMouseOver:false,//false则mouseover无效果
         useArrows:true,//小箭头
         trackMouseOver:true, //mouseover效果       
         singleExpand:true,//用单击事件展开,默认为双击
         border:false, //边框
         useArrows:true
     });
  var root = new Ext.tree.TreeNode({
   id:"root",
   text:"根节点",
   expanded:true
  });

  //第一个子节点及其子节点 
  var sub1 = new Ext.tree.TreeNode({ 
   id:"news", 
   text:"新闻管理", 
   singleClickExpand:true
  });
  
    sub1.appendChild(new Ext.tree.TreeNode({
   id:"addNews",
   text:"添加新闻",
   autoScroll:true,
   //href:"http://www.moontalk.com.tw",
   //hrefTarget:"mainFrame",
   qtip:"月亮说话",//添加鼠标点击上提示效果信息需要添加 Ext.QuickTips.init();
   /*
   listeners:{//监听
    "click":function(node,e){
    //alert(node.text)  //添加点击后弹出提示框信息
    }
   }*/
   listeners:{
    'click':function(node, event) {
     event.stopEvent();
     var n = contentPanel.getComponent(node.id);
     if (!n) { //判断是否已经打开该面板
      n = contentPanel.add({    
      'id':node.id,
      'title':node.text,
      'layout': 'fit',
      'containerScroll':true,      
      'autoScroll':true,
      'autoShow':true,
      'closable':true,  //通过html载入目标页
      'html':'<iframe scrolling="auto" frameborder="0" leftmargin="0" ' +
        'topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%"' +
        'src="http://www.moontalk.com.tw" />'
     });
    }
     contentPanel.setActiveTab(n);
    }
   }
  }));
    
  sub1.appendChild(
   new Ext.tree.TreeNode({ 
    id:"editNews", 
    text:"编辑新闻",
    autoScroll:true,
    listeners:{
     'click':function(node, event) {
      event.stopEvent();
      var n = contentPanel.getComponent(node.id);
      if (!n) { //判断是否已经打开该面板
       n = contentPanel.add({
       'id':node.id,
       'title':node.text,
       layout:"fit",
       autoShow:true,
       closable:true,  //通过html载入目标页
       html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="extjs.jsp"></iframe>'
      });
     }
      contentPanel.setActiveTab(n);
     }
    }
   })
  );
  
  sub1.appendChild(new Ext.tree.TreeNode({
   id:"delNews",
   text:"删除新闻",
   listeners:{
    'click':function(node, event) {
     event.stopEvent();
     var n = contentPanel.getComponent(node.id);
     if (!n) { //判断是否已经打开该面板
      n = contentPanel.add({
      'id':node.id,
      'title':node.text,
      autoShow:true,
      closable:true,  //通过html载入目标页
      html:'<iframe scrolling="auto" frameborder="0" leftmargin="0" ' +
        'topmargin="0" marginwidth="0" marginheight="0" width="100%" height="100%"' +
        'src="index.jsp" />'
     });
    }
     contentPanel.setActiveTab(n);
    }
   }
  }));
  root.appendChild(sub1);
  
  var sub2 = new Ext.tree.TreeNode({ 
   id:"sys",
    text:"系统设置",
   singleClickExpand:true
  });
  sub2.appendChild(new Ext.tree.TreeNode({
   id:"del2News",
   text:"删除新闻",
   listeners:{
    'click':function(node, event) {
     event.stopEvent();
     var n = contentPanel.getComponent(node.id);
     if (!n) { //判断是否已经打开该面板
      n = contentPanel.add({
      'id':node.id,
      'title':node.text,
      closable:true,  //通过html载入目标页
      //html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="extjs.jsp"></iframe>'
      html:'<iframe scrolling="auto" frameborder="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" src="index.jsp" />'
      
     });
    }
     contentPanel.setActiveTab(n);
    }
   }
  }));
  
  root.appendChild(sub2); 
  
  mytree.setRootNode(root);//设置根节点
   
  mytree.render();//进行显示初始化

  //右边具体功能面板区
  var contentPanel = new Ext.TabPanel({     
     region:"center",    
     border:false, //边框
     resizeTabs:false,
     deferredRender:false,
     tabWidth:60,
     autoTabs:true,
     maskDisabled:true,//对面板进行遮罩
     monitorResize:true,//按照浏览器的大小渲染布局
     animCollapse:true,//面板闭合过程附动画效果
     autoShow:true,//检测是有否隐藏的样式类
     activeTab: 0,
           defaults:{autoScroll:true},          
     items:[{
        id:"homePage",
        title:"首页",      
        containerScroll:true,       
        autoScroll: true,
              autoWidth: true,
              layout: 'fit',
              autoHeight: true,
          html:'Tree控件和TabPanel控件结合功能演示!!'
     }]
  });
  
  var viewport = new Ext.Viewport({
         layout: 'border',
         border:false, //边框
         autoScroll:true,
         autoHeight:true,
         defaults: {
             collapsible: true
         },
         viewConfig: {
    forceFit: true
        },
         items: [{
             title: '标题',
             region: 'north',
             html: '插入标题LOG',
             collapsible:false,
             autoHeight:true,
             border:true,
             margins: '5 5 5 5'
             },{
             title: '业务菜单',
             region: 'west',
             id:'west-panel',
             width: 250,
             minSize: 250,
             maxSize: 250,
             collapsible: true,
             margins:'0 0 5 5',
             cmargins:'0 5 5 5',
             layout:'accordion',
             layoutConfig:{
                 animate:true
             },
             items: [{
                 items:[mytree],
                 title:'业务菜单',
                 autoScroll:true,
                 border:false,
                 iconCls:'nav'
             },{
                 title:'系统设置',
                 html: '系统菜单',
                 border:false,
                 autoScroll:true,
                 iconCls:'settings'
             }]
         },{
             //title: '数据展示',
             region: 'center',
             margins:'0 5 5 5',
             collapsible: false,
             layout: 'fit',
             items:[{
              items:[contentPanel]
             }]
         }]
     }); 
});

maimeng的主页 maimeng | 初学一级 | 园豆:200
提问于:2010-07-16 10:29
< >
分享
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册