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>