?
???? 一般在使用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>?