功能需求如下:
ExtJs(v3.1) 框架, TabPanel 需要 2 個 tab, 每個 tab 中分別嵌入一個表單(FormPanel)和一個表格(GridPanel), 表單用于查詢條件, 表格用于數(shù)據(jù)展示, 頁面初始化時每個 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, // 標(biāo)簽寬度
labelAlign : 'right', // 標(biāo)簽對齊方式
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 : '手機(jī)號',
id : 'account',
name : 'account',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '業(yè)務(wù)員',
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>', // 表格面板標(biāo)題,默認(rèn)為粗體，我不喜歡粗體，這里設(shè)置樣式將其格式為正常字體
height : document.body.clientHeight/2 * 1.5,
id : 'id_grid_ddlb',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型對應(yīng)，充當(dāng)center區(qū)域布局
margins : '3 3 3 3',
store : draft_store, // 數(shù)據(jù)存儲
stripeRows : true, // 斑馬線
cm : draft_sm, // 列模型
tbar : draft_tbar, // 表格工具欄
bbar : draft_bbar,// 分頁工具欄
viewConfig : {
forceFit:true
},
loadMask : {
msg : '...正在加載表格數(shù)據(jù),請稍等...'
}
});下面給出 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, // 標(biāo)簽寬度
labelAlign : 'right', // 標(biāo)簽對齊方式
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 : '手機(jī)號',
id : 'public_account',
name : 'account',
maxLength : 50,
anchor : '100%'
},{
fieldLabel : '業(yè)務(wù)員',
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>', // 表格面板標(biāo)題,默認(rèn)為粗體，我不喜歡粗體，這里設(shè)置樣式將其格式為正常字體
height : document.body.clientHeight/2 * 1.5,
id : 'id_public_grid',
autoScroll : true,
frame : true,
region : 'center', // 和VIEWPORT布局模型對應(yīng)，充當(dāng)center區(qū)域布局
margins : '3 3 3 3',
store : public_store, // 數(shù)據(jù)存儲
stripeRows : true, // 斑馬線
cm : public_sm, // 列模型
tbar : public_tbar, // 表格工具欄
bbar : public_bbar,// 分頁工具欄
viewConfig : {
},
loadMask : {
msg : '...正在加載表格數(shù)據(jù),請稍等...'
}
});下面是 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=""> 發(fā) 布 中',
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 通過瀏覽器的開發(fā)人員工具來查看, 沒有報錯.
2 通過開發(fā)人員工具來查看, 切換選項卡后可以查看到表格元素還存在.
3 ExtJs 版本號是 3.1
遇到過類似問題的朋友請幫忙解決下, 兄弟我先多謝了！
問題已經(jīng)解決, 沒有顯示出來的原因是, tab 的高度發(fā)生變化, 導(dǎo)致tab里面的元素沒有顯示完整, 我處理的辦法是, 在切換選項卡的時候, 重新設(shè)置 tab 的高度就可以了
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團(tuán)創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機(jī)構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團(tuán)，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達(dá)內(nèi)教育集團(tuán)成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機(jī)構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍(lán)懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負(fù)責(zé)iOS教學(xué)及管理工作。
浪潮集團(tuán)項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機(jī)訂課，優(yōu)惠多多