一般在使用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" target="_blank" rel="external nofollow" />
<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>
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)