Form Disappears when switching Tabs in IE.
July 4th, 2009
This is driving me nuts.
I have an app with a Tree on the left hand side and a TabPanel with 3 tabs on the right.
Clicking an item in the Tree populates a form on two of the tabs.
When the data is initially displayed in the forms, the form fields are disabled. Clicking a 'Modify' button on either of the two forms, enables the fields on that form so the user can edit the data. So far so good.
However, in IE 7, if you click an item in the tree, go to the second tab, click the modify button to enable the form fields, then switch tabs again; when you go back to the second tab all the form fields are gone. This only happens to the form fields on the second tab.
I've tried putting doLayout() every place I could think of to force those form fields to redraw, but to no avail.
The weird thing is, if you put your mouse cursor over the area where the form fields are supposed to be, it switches to the I-beam. So the browser clearly knows that a form field is supposed to be there.
My TabPanel:
adTabs = new Ext.TabPanel(
{
id : 'ad-tabs'
,region : 'center'
,deferredRender : false
,activeTab : 0
,layoutOnTabChange : true
// Create the Ad Tabs within the Ads TabPanel
,items:[
{ contentEl: 'ad-info', title: 'Ad Info', autoScroll: true }
,{ contentEl: 'ad-target', title: 'Ad Targeting', autoScroll: true }
,{ contentEl: 'ad-media', title: 'Ad Media', autoScroll: true }
]
});
This is how I'm loading data into the forms (Rails on the back-end):
// Get the Ad Info from the DB
adInfoFormPanel.getForm().load({
url :'/ads/' + objNode.id + '.xml'
,method : 'GET'
,waitMsg :'Loading'
});
// Get the Ad Targeting Data from the DB
adTargetFormPanel.getForm().load({
url :'/targeting_selects/' + objNode.id + '.xml'
,method : 'GET'
,waitMsg:'Loading'
});
And here's where I enable/disable my form fields:
function modifyAdTargetForm( iMode )
{
//Modify the button according to current functionality
if ( iMode == CREATE iMode == VIEW iMode == UPDATE ) {
changeFormBtnTxt( adTargetFormPanel, iMode );
}
// Tweak the form to match current functionality
if ( (iMode == CREATE) (iMode == UPDATE) ) {
// Create/Edit an Ad Info record. Enable all form fields.
adTargetFormPanel.findById( AD_TARGET_FORM_DEST ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_CABIN ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_FLYER ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_GENDER ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_LOW ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_HIGH ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_START ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_END ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_ID ).enable();
adTargetFormPanel.findById( AD_TARGET_FORM_AD_ID ).enable();
// If the form is re-entering CREATE mode, reset it.
if ( iMode == CREATE ) {
adTargetFormPanel.getForm().reset();
}
} else if ( iMode == VIEW ) {
// View an Ad Info record. Disable all form fields.
adTargetFormPanel.findById( AD_TARGET_FORM_DEST ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_CABIN ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_FLYER ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_GENDER ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_LOW ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_HIGH ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_START ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_END ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_ID ).disable();
adTargetFormPanel.findById( AD_TARGET_FORM_AD_ID ).disable();
} else {
// Something went wrong
displayMsgBox( MSGBOX_TXT_ERROR_FORM_TYPE + iFormType
,MSGBOX_TITLE_ERROR
,Ext.MessageBox.ERROR
,Ext.MessageBox.OK );
}
}
Any help and/or suggestions greatly appreciated!
Thanks!
The workaround is to hide elements using visibility:hidden;position:aboslute;top:-10000px;left:-10000px (which can be selected with hideMode:'offsets').
However, this is not the default hideMode, because it makes the browser slower (so only use hideMode:'offsets' when needed).
The whole point of having a VIEW (read-only) mode for my form was to force users to take an extra step in order to edit the DB data.
If I get rid of my VIEW mode, meaning if I don't programatically disable/enable the form fields and simply allow users to edit the data as soon as the form is populated, this problem goes away.
I've had a few IE problems of this nature, all centered around modifying a form in some way on an inactive Tab. Is this a known issue and something I should try to avoid doing in the future?
I'm relatively new to Ext development. :-)
Why would that or should that have mattered?
Read this thread:
http://extjs.com/forum/showthread.php?t=41396
The workaround is to hide elements using visibility:hidden;position:aboslute;top:-10000px;left:-10000px (which can be selected with hideMode:'offsets').
However, this is not the default hideMode, because it makes the browser slower (so only use hideMode:'offsets' when needed).
AH! Thank you!
That makes complete sense in light of the issues I've been having with forms & inactive tabs.
Read this thread:
http://extjs.com/forum/showthread.php?t=41396
Cool, thanks. I'll keep that solution in mind. I've actually got three sets of Tabs to layout and hiding content offscreen may turn out to be impractical as the app grows in size.
#If you have any other info about this subject , Please add it free.# |
