functional requirements are as follows:
ExtJs (v3.1) framework, TabPanel requires two tab, to embed a form (FormPanel) and a table (GridPanel), form in each tab for query conditions, the table is used for data display, and the form and table in each tab can be displayed normally when the page is initialized, but after switching the tab tab, the form does not appear, nor does the query button on the form. Only the input box of the form can be displayed normally. I hope friends who have encountered similar problems can help!
the following is the code for tab1"s form and table
//
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", // VIEWPORTcenter
margins : "3 3 3 3",
store : draft_store, //
stripeRows : true, //
cm : draft_sm, //
tbar : draft_tbar, //
bbar : draft_bbar,//
viewConfig : {
forceFit:true
},
loadMask : {
msg : "...,..."
}
});the following is the code for tab2"s form and table
//
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", // VIEWPORTcenter
margins : "3 3 3 3",
store : public_store, //
stripeRows : true, //
cm : public_sm, //
tbar : public_tbar, //
bbar : public_bbar,//
viewConfig : {
},
loadMask : {
msg : "...,..."
}
});the following is the code for 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]
}); here are the pictures at initialization and those after switching tabs
Note:
1 is checked through the developer tool of the browser, and no error is reported.
2 is viewed through the developer tool. After switching tabs, you can see that the table elements still exist.
3 ExtJs version number is 3.1
friends who have encountered similar problems, please help solve them, brother, I would like to thank you in advance!