ExtJs TabPanel 中嵌入表单和表格, 页面初始化时能够正常显示, 但是切换选项卡后没有显示, 求助?
功能需求如下:
ExtJs(v3.1) 框架, TabPanel 需要 2 个 tab, 每个 tab 中分别嵌入一个表单(FormPanel)和一个表格(GridPanel), 表单用于查询条件, 表格用于数据展示, 页面初始化时每个 tab中的表单和表格都能够正常显示出来, 但是切换 tab 选项卡后, 表格没有显示, 表单上面的查询按钮也没有显示, 只剩下表单的输入框可以正常显示, 希望遇到过类似问题的朋友帮忙一下！
下面给出 tab1 的表单和表格的代码
// 表格
var draft_qForm = new Ext.form.FormPanel({
id:'draft_qForm',
region : 'north',
margins : '3 3 3 3',
title : '<span class="commoncss">查询条件<span>',
collapsible : false,
border : false,
labelWidth : 50, // 标签宽度
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:3 5 0', // 表单元素和表单面板的边距
buttonAlign : 'center',
height : 130,
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '姓名',
id : 'name',
name : 'username',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '客服',
id : 'service',
name : 'service',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '手机号',
id : 'account',
name : 'account',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '业务员',
id : 'salesmanname',
name : 'salesmanname',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '公司',
id : 'companyname',
name : 'companyname',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '主帐号',
id : 'mainuser',
name : 'mainuser',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : []
}]
}],
buttons : [{
text : '查询',
iconCls : 'previewIcon',
handler : function() {
queryExtuser();
}
}, {
text : '重置',
iconCls : 'tbar_synchronizeIcon',
handler : function() {
draft_qForm.getForm().reset();
}
}]
});// 表格实例
var draft_grid = new Ext.grid.GridPanel({
title : '<span class="commoncss">订舱单列表</span>', // 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
height : document.body.clientHeight/2 * 1.5,
id : 'id_grid_ddlb',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
margins : '3 3 3 3',
store : draft_store, // 数据存储
stripeRows : true, // 斑马线
cm : draft_sm, // 列模型
tbar : draft_tbar, // 表格工具栏
bbar : draft_bbar,// 分页工具栏
viewConfig : {
forceFit:true
},
loadMask : {
msg : '...正在加载表格数据,请稍等...'
}
});下面给出 tab2 的表单和表格的代码
// 表单
var public_qForm = new Ext.form.FormPanel({
id:'public_qForm',
region : 'north',
margins : '3 3 3 3',
title : '<span class="commoncss">查询条件<span>',
collapsible : false,
border : false,
labelWidth : 50, // 标签宽度
labelAlign : 'right', // 标签对齐方式
bodyStyle : 'padding:3 5 0', // 表单元素和表单面板的边距
buttonAlign : 'center',
height : 130,
items : [{
layout : 'column',
border : false,
items : [{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '姓名',
id : 'public_name',
name : 'username',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '客服',
id : 'public_service',
name : 'service',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '手机号',
id : 'public_account',
name : 'account',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '业务员',
id : 'public_salesmanname',
name : 'salesmanname',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : [{
fieldLabel : '公司',
id : 'public_companyname',
name : 'companyname',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '主帐号',
id : 'public_mainuser',
name : 'mainuser',
maxLength : 50,
anchor : '100%'
}]
},{
columnWidth : .30,
layout : 'form',
labelWidth : 80,
defaultType : 'textfield',
border : false,
items : []
}]
}],
buttons : [{
text : '查询',
iconCls : 'previewIcon',
handler : function() {
//queryExtuser();
}
}, {
text : '重置',
iconCls : 'tbar_synchronizeIcon',
handler : function() {
public_qForm.getForm().reset();
}
}]
});// 表格实例
var public_grid = new Ext.grid.GridPanel({
title : '<span class="commoncss">订舱单列表</span>', // 表格面板标题,默认为粗体，我不喜欢粗体，这里设置样式将其格式为正常字体
height : document.body.clientHeight/2 * 1.5,
id : 'id_public_grid',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型对应，充当center区域布局
margins : '3 3 3 3',
store : public_store, // 数据存储
stripeRows : true, // 斑马线
cm : public_sm, // 列模型
tbar : public_tbar, // 表格工具栏
bbar : public_bbar,// 分页工具栏
viewConfig : {
},
loadMask : {
msg : '...正在加载表格数据,请稍等...'
}
});下面是 tabPanel 的代码
var draftTab = new Ext.Panel({
id : "id_booking_draft",
title : '<img src="/resource/image/ext/image.png" align="top" class=""> 草 稿',
items:[draft_qForm,draft_grid]
});
var publicTab = new Ext.Panel({
id : "id_booking_public",
title : '<img src="/resource/image/ext/layout_content.png" align="top" class=""> 发 布 中',
items:[public_qForm, public_grid]
});
var tabPanel = new Ext.TabPanel({
renderTo: "id_tabpanel_draft",
activeTab: 0,
plain : true,
//border: false,
//deferredRender: false,
//layoutOnTabChange : true,
//region : "center",
items:[draftTab,publicTab]
}); 下面是初始化时的图片和切换选项卡后的图片
说明:
1 通过浏览器的开发人员工具来查看, 没有报错.
2 通过开发人员工具来查看, 切换选项卡后可以查看到表格元素还存在.
3 ExtJs 版本号是 3.1
遇到过类似问题的朋友请帮忙解决下, 兄弟我先多谢了！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
问题已经解决, 没有显示出来的原因是, tab 的高度发生变化, 导致tab里面的元素没有显示完整, 我处理的办法是, 在切换选项卡的时候, 重新设置 tab 的高度就可以了