tabpanel 使用问题

 

     一般在使用tabpanel的多页显示的使用大部分都是使用iframe嵌套页面做显示,我们项目中有一个雇员信息分类显示的页面,是吧雇员的信息分成几大类别显示,如果做成几个页面在用iframe显示未免有点浪费,查询出来数据以后不好处理

这时候我希望用多个formpanel 分别render tablepanel的<html><div id="xx"></html>中,但是始终没法渲染成功

搞了一个上午终于发现了问题的根源tab下的标题是不点击不会激活的,所以在frompanel在render的时候div还没有加载到页面中,导致render出错,

    我找到了两种解决方法

1:myTabPanel.setActiveTab(newComponent); 使用这个方法可以在加载完tabpanel且formpanel没有render的时候

把各个标题一次激活,但这这样会有一个问题,就是本来formpanel的正常布局全部都成了纵向布局,这个问题不知道是什么原因,我在做extjs页面开发的时候经常会遇到把formpanel嵌套到另一个组件中发生布局错误

 

2:首先把frompanel new出来,然后把tabpanel new出来,在tabpanel中添加监听事件 listeners: {activate: function()
                    {
                    formpanel.render("f");
                       
                    }
                 
                 },

顺序要正常不然也不会正常显示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Complex Layout</title>
	<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
    
    
 	<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
  
    <script type="text/javascript" src="../extjs/ext-all.js"></script>
 
	<script type="text/javascript">
   Ext.onReady(function(){
	 

	 var fp=new Ext.form.FormPanel({
	
	labelAlign:'left',
	buttonAlign:'center',
	width:500,
//	renderTo:"f",
	autoHeight:true,
	layout:"form",
	bodyStyle:'padding:0px;',
    frame:true,
	labelAlign:"right",
	labelWidth:85,
	monitorValid:true,
		items:
		[
		 
		  
            {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
			 ]} 
           
			 

		 
		 ] 
	
	});

	var fp1=new Ext.form.FormPanel({
	
	labelAlign:'left',
	buttonAlign:'center',
	width:500,
//	renderTo:"f1",
	autoHeight:true,
//	layout:"form",
	bodyStyle:'padding:0px;',
    frame:true,
	labelAlign:"right",
	labelWidth:85,
	monitorValid:true,
		items:
		[
		 
		  
            {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
			 ]} 
           
			 

		 
		 ] 
	
	});
	
	var fp2=new Ext.form.FormPanel({
	
	labelAlign:'left',
	buttonAlign:'center',
	width:500,
//	renderTo:"f1",
	autoHeight:true,
//	layout:"form",
	bodyStyle:'padding:0px;',
    frame:true,
	labelAlign:"right",
	labelWidth:85,
	monitorValid:true,
		items:
		[
		 
		  
            {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
			 ]} 
           
			 

		 
		 ] 
	
	});
	
	var fp3=new Ext.form.FormPanel({
	
	labelAlign:'left',
	buttonAlign:'center',
	width:500,
//	renderTo:"f1",
	autoHeight:true,
//	layout:"form",
	bodyStyle:'padding:0px;',
    frame:true,
	labelAlign:"right",
	labelWidth:85,
	monitorValid:true,
		items:
		[
		 
		  
            {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
			 ]},
			   {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
			 ]},
			  {layout:"column",items:[
			
			 {layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
			 {layout:"form",columnWidth:.5,  items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
			 ]} 
           
			 

		 
		 ] 
	
	});
	
	 var tabs2 = new Ext.TabPanel({
        renderTo: "d",
        activeTab:0,
        width:500,
        height:500,
		//autoScroll:true,
		frame:true,
        plain:true,
      //  defaults:{autoScroll: true},
        items:[ 
			{
                title: '基本信息',
              listeners: {activate: function()
					{
					fp.render("f");
						
					}
				 
				 },
				html:"<div  id='f'></div>"
            },
			
			
			{
                title: '福利信息',
		         listeners: {activate: function()
					{
						fp1.render("f1");
						 
					}
				 
				 },

				html:"<div  id='f1'></div>"
            },
			{
                title: '服务费用',
                 listeners: {activate: function()
					{
					fp.render("f2");
						
					}
				 
				 },
                html: "<div  id='f2'></div>"
            },
			
			{
                title: '附加信息',
               listeners: {activate: function()
					{
					fp.render("f3");
						
					}
				 
				 },
                html: "<div  id='f3'></div>"
            }
        ]
    });
 
  
  


	
    
});
	</script>
</head>
<body bgcolor=#DFE8F6>
  
  
 <div id='d'></div><br> 
  <div id='d1'></div><br> 
 </body>
</html>
 

你可能感兴趣的:(JavaScript,html,css,ext,FP)