日期:2014-05-16  浏览次数:20694 次

Ext:tabPanel嵌套panel不显示
本帖最后由 yanlin0813 于 2013-01-28 19:56:38 编辑
先上代码:
这个是home.jsp,点击导航会自动添加tab标签

Ext.BLANK_IMAGE_URL = "./extJs/resources/images/default/s.gif";
  Ext.QuickTips.init();
  var left;
  
  Ext.onReady(function(){
 //logo
  var top = new Ext.Panel({
  region:'north',
  title:"logo",
  height:80,
  html:"这里是logo"
  });
 
 //树形菜单
 left = new Ext.tree.TreePanel({
 region:'west',
 title:"功能导航",
 collapsible:true,
 split:true,
 containerScroll:true,
 aotuScroll:true,
 width:200,
 listeners:{
  dblclick:function(n){
  var url = n.attributes.url;
  var id = n.attributes.id;
  alert("url="+url+"-------id="+id);
  alert(n.attributes.text);
  if(url){
  if(center.getItem(id)){
  center.setActiveTab(id);
  }else{
  var p = new Ext.Panel({
  title:n.attributes.text,
  id:id,
  autoLoad:{url:url,script:true},
  closable:true
  });
  center.add(p);
  center.setActiveTab(p);
  }
  }
  }
 }
 }); 
 
 var root = new Ext.tree.TreeNode({id:"1",text:"人员管理系统",leaf:"false"});
 //注意这个跳转路径
         var addEmp = new Ext.tree.TreeNode({text:"新增员工",url:"addEmp.jsp"});
 var listEmp = new Ext.tree.TreeNode({text:"员工信息维护",url:"listEmp.jsp"});
 root.appendChild([addEmp,listEmp]);
 left.setRootNode(root);
 
 //中间面板
 var center = new Ext.TabPanel({
 region:'center',
 defaults:{aotuScroll:true},//自动出现滚动条
 items:[{
 title:"首页",
 html:"这是首页",
 id:"index"
 }],
 enableTabScroll:true
 });
 center.setActiveTab("index");
 center.doLayout();
 var vp = new Ext.Viewport({
 layout:'border',
 items:[top,left,center]
 });
 left.expandAll();
  });


addEmp.jsp  这里我就想随便写个panel嵌套进去

Ext.onReady(function(){
new Ext.Window({
title: "窗口",
width: 400,
height: 300,
bodyStyle: "padding: 5px",
items:[
new Ext.Button({text:'新按钮'}),
new Ext.DatePicker({})
]
}).show(Ext.getBody());
});



运行的结果是:
1、在tabpanel中  不显示addEmp.jsp中的ext部分内容,无论写什么样的ext都不显示,只可以显示body中的内容,(是不是他显示了 在底下?被覆盖了?可是用firfox没用找到相应的dom。也许我没找对??.......)

2、可是 直接访问addEmp.jsp显示的是正确的。
ext tabpanel

------解决方案--------------------
autoLoad html iframe src url