Issue with showing/hiding form buttons in Safari [Archive]

gregabyte

30 Sep 2009, 7:22 AM

Hello,

We are developing a site with ExtJS 3.0, and it is basically a series of questions that a user must answer. I have a FormPanel which I add and remove questions from, basically showing one question at a time, along with Next, Previous, and Submit buttons to navigate between the questions and submit the responses at the end. Only the Next button shows initially, then Previous is shown after first question, and Submit is shown for last question. The buttons are toggled using the show() and hide() methods on the button objects. Works great except in Safari. In Safari, when the Previous button is shown on the 2nd question, the Next button is shoved about 95% of the way outside the form - you can see a little slice of the button but the rest is invisible. This did not happen with ExtJS 2.X which we were using when we started the project. Anyone seen this before, or is it a newly discovered bug in 3.0? Thanks!

jay@moduscreate.com

30 Sep 2009, 8:07 AM

Can you post code that demonstrates this issue?

gregabyte

1 Oct 2009, 5:53 AM

I was able to distill it down to this example form that has just the buttons. It is simulating having 3 questions. This works fine except on Safari - in Safari if you click the Next button, Previous shows up and Next gets shoved out of view. If I change "ext3" to "ext2" in the head section (I have both versions in the same directory as this file), it works in Safari, so I think this bug was introduced in version 3.0. It's probably not recalculating the button layout as part of the FormPanel.doLayout() call.

<html>
<head>
<script src="ext3/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext3/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="ext3/resources/css/ext-all.css" />
</head>

<body>
<div id="prompt">
<span id="prompt-content">Please answer the following questions.</span>
</div>

<div id="form-ct" style="margin: 0px;"></div>

<script>
Ext.onReady(function(){
var SurveyForm = Ext.extend(Ext.FormPanel, {
constructor: function(config) {
this.currentQuestion=0;
this.previousButton = new Ext.Button({id: 'previousButton',
text: 'PREVIOUS',
handler: this.previous,
scope: this});

this.nextButton = new Ext.Button({id: 'nextButton',
text: 'NEXT',
handler: this.next,
scope: this});

this.submitButton = new Ext.Button({id: 'submitButton',
cls: 'submit-button',
text: 'SUBMIT',
scope: this});

SurveyForm.superclass.constructor.call(this, {
frame: true,
header: true,
title: 'Safari Test',
buttonAlign: "right",
width: 540,
height: 320,
renderTo:'form-ct',
bodyStyle: 'padding:0 10px 0 8px;',
labelAlign: 'top',
items: [{
layout: 'form'
}],
buttons:[this.previousButton, this.nextButton, this.submitButton]
});
},

next: function() {
this.currentQuestion++;
this.updateButtons();
},

previous: function() {
this.currentQuestion--;
this.updateButtons();
},

updateButtons: function() {
if (this.currentQuestion>1) {
this.previousButton.show();
} else {
this.previousButton.hide();
}

if (this.currentQuestion==3) {
this.nextButton.hide();
this.submitButton.show();
} else {
this.nextButton.show();
this.submitButton.hide();
}
this.doLayout();
}

});
Ext.QuickTips.init();

var s = new SurveyForm();
s.next();

});

</script>

</body>
</html>

gregabyte

2 Oct 2009, 5:14 PM

Hi jgarcia (or anyone else who happens to be reading...) - were you able to reproduce the problem, or see anything in my code that could be to blame?

What is the next step if we want to escalate this - would something like this be covered under our support plan?

Thanks!

woomboom

3 Nov 2009, 11:50 PM

Try setting enableOverflow: false on your toolbar. I had some similar issues and found it to be caused from the fitToSize() function in the ToolBarLayout. by setting enableOverflow: false, this will disable the function.

pabloidz

3 Dec 2009, 9:48 AM

@woomboom, thanks for the enableOverflow: false tip!

I was having this issue in IE7+, in a not so simple layout (Ext.TabPanel > Ext.TabPanel > Ext.grid.EditorGridPanel > Ext.Toolbar with hidden: true). If you get the same error below, disabling the overflow in the Ext.Toolbar might work:

Message: Object required
Line: 41562
Char: 9

The message appears using ext-all-debug.js, and enableOverflow isn't a documented config option.