Tabs display problem with Safari

[DeeZ]

Hi,
I have a bug with Safari 2.0.4 (419.3) when I use tabs. The javascript console display nothing ...
I attached two images (the correct layout wiht FF, the display bug with Safari) and the complete code in the ZIP file.

I put the JS code too below. I'm using "ext-1.0.1" with "ext-yui-adapter" and "yui-utilities"

Any ideas ?
Thx.


Ext.onReady(function(){
// START: Form defintion
var UserCreationObj = new Ext.form.Form({labelWidth: 250, labelAlign: 'right'});
// START: Category definition
var UserOptionsCategoryObj = UserCreationObj.fieldset({legend: label_UserProperties});
var el1 = new Ext.form.TextField({fieldLabel: label_FirstName, name: 'FirstName'});
var el2 = new Ext.form.TextField({fieldLabel: label_LastName, name: 'LastName'});
var el3 = new Ext.form.TextField({fieldLabel: label_Account, name: 'Account'});
var el4 = new Ext.form.TextField({fieldLabel: label_Pwd, name: 'Pwd', inputType: 'password'});
var el5 = new Ext.form.TextField({fieldLabel: label_ConfirmPwd, name: 'ConfirmPwd', inputType: 'password'});
var el6 = new Ext.form.DateField({fieldLabel: label_AccountExpiration, name: 'AccountExpiration'});
var el7 = new Ext.form.Checkbox({boxLabel: label_AccountActivated, name: 'AccountActivated', labelWidth: 0, labelSeparator: '', checked: true});
var el8 = new Ext.form.FieldSet({legend:label_UserProperties}, el1, el2, el3, el4, el5, el6, el7);
UserCreationObj.add(el1, el2, el3, el4, el5, el6, el7);
UserCreationObj.end();
el1 = el2 = el3 = el4 = el5 = el6 = el7 = null;
// END: Category definition

// START: Category definition
// START: TabsGroup definition
var UserOptionsTabsArray = new Array();

// START: TabsGroup in a form - add container
var UserOptionsTabsGroupObj = UserCreationObj.container();
UserCreationObj.end();
// END: TabsGroup in a form - add container

//START: Tab definition
var el1 = new Ext.form.Checkbox({boxLabel: label_UserQuotaActivated, name: 'UserQuotaActivated', labelWidth: 0, labelSeparator: ''});
var el2 = new Ext.form.NumberField({fieldLabel: label_AlertQuota, name: 'AlertQuota'});
var el3 = new Ext.form.NumberField({fieldLabel: label_LimitQuota, name: 'LimitQuota'});
var el4 = new Ext.form.Checkbox({boxLabel: label_UserEmailQuotaActivated, name: 'UserEmailQuotaActivated', labelWidth: 0, labelSeparator: ''});
var el5 = new Ext.form.NumberField({fieldLabel: label_EmailLimitQuota, name: 'EmailLimitQuota'});

UserOptionsTabsArray[0] = UserCreationObj.container(
{el:Ext.DomHelper.append(Ext.get('UserCreationDiv' ), {tag:'div', style:'padding:10px'})},
el1, el2, el3, el4, el5);
el1 = el2 = el3 = el4 = el5 = null;
//START: End Tab definition

//START: Tab definition
var el1 = new Ext.form.TextField({fieldLabel: label_FirstEmailAddress, name: 'FirstEmailAddress'});
var el2 = new Ext.form.TextField({fieldLabel: label_SecondEmailAddress, name: 'SecondEmailAddress'});
var el3 = new Ext.form.Checkbox({boxLabel: label_AuthorizedExternalEmailTraffic, name: 'AuthorizedExternalEmailTraffic', labelWidth: 0, labelSeparator: '', checked: true});
UserOptionsTabsArray[1] = UserCreationObj.container(
{el:Ext.DomHelper.append(Ext.get('UserCreationDiv' ), {tag:'div', style:'padding:10px'})},
el1, el2, el3);
el1 = el2 = el3 = null;
//START: End Tab definition

//START: Tab definition
var el1 = new Ext.form.TextField({fieldLabel: label_ExternalEmailDescription, name: 'ExternalEmailDescription'});
var el2 = new Ext.form.TextField({fieldLabel: label_EmailServerAddress, name: 'EmailServerAddress'});
var el3 = new Ext.form.TextField({fieldLabel: label_EmailServerLogin, name: 'EmailServerLogin'});
var el4 = new Ext.form.TextField({fieldLabel: label_EmailServerPwd, name: 'EmailServerPwd', inputType: 'password'});
var el5 = new Ext.form.TextField({fieldLabel: label_EmailServerConfirmPwd, name: 'EmailServerConfirmPwd', inputType: 'password'});
//START: Radio Group
var el6 = new Ext.form.Radio({fieldLabel: label_EmailProtocol, name: 'EmailProtocol', boxLabel:label_IMAP, checked: true});
var el7 = new Ext.form.Radio({name: 'EmailProtocol', boxLabel:label_POP3, labelWidth: 0, labelSeparator: ''});
//END: Radio Group
var el8 = new Ext.form.Checkbox({boxLabel: label_EmailKeptOnServer, name: 'EmailKeptOnServer', labelWidth: 0, labelSeparator: ''});
var el9 = new Ext.form.Checkbox({boxLabel: label_UseSSLConnection, name: 'UseSSLConnection', labelWidth: 0, labelSeparator: ''});
var el10 = new Ext.form.Checkbox({boxLabel: label_ActivateRetrieval, name: 'ActivateRetrieval', labelWidth: 0, labelSeparator: '', checked: true});
UserOptionsTabsArray[2] = UserCreationObj.container(
{el:Ext.DomHelper.append(Ext.get('UserCreationDiv' ), {tag:'div', style:'padding:10px'})},
el1, el2, el3, el4, el5, el6, el7, el8, el9, el10);
el1 = el2 = el3 = el4 = el5 = el6 = el7 = el8 = el9 = el10 = null;
//START: End Tab definition

UserCreationObj.end();
// END: TabsGroup definition
// END: Category definition

UserCreationObj.addButton('Ok');
UserCreationObj.render('UserCreationDiv');
// END: Form defintion

//START: Specific routines to add TabsGroup in a form
var tabPanel1=new Ext.TabPanel(UserOptionsTabsGroupObj.el);
tabPanel1.addTab(UserOptionsTabsArray[0].getEl().id,label_UserQuota);
tabPanel1.addTab(UserOptionsTabsArray[1].getEl().id,label_UserEmailOptions);
tabPanel1.addTab(UserOptionsTabsArray[2].getEl().id,label_UserRemoteMessaging);
tabPanel1.activate(0);
tabPanel1 = null;
//END: Specific routines to add TabsGroup in a form


});

[DeeZ]

This bugs occurs in Safari 2.0.4 but not in Safari 3.0.2 (at least windows version)

Tabs are correclty managed by Safari 2.0.4 if the method "setContent" and "setURL" of "TabPanelItem" are used for example.

Tabs are NOT correclty managed if a form is added in the "TabPanelItem" using bodyEl object:

var myForm = new Ext.form.Form({labelWidth: 250, labelAlign: 'right', style: 'padding:10px'});
var el1 = new Ext.form.NumberField({fieldLabel: 'ResendFrequencyEmailError', name: 'ResendFrequencyEmailError'});
var el2 = new Ext.form.NumberField({fieldLabel: 'ExpirationEmailError', name: 'ExpirationEmailError'});
myForm.add(el1, el2);
myForm.end();
el1 = el2 = null;
myForm.addButton('Ok');
myForm.render(myTabPanelItem.bodyEl);


Can someone reproduce the same bug ? is there any workaround ? or is it planned to correct that ?

Thx.

[jack.slocum]

I'm not sure what to tell you. There is nothing Ext can do about this since it doesn't know where you are rendering the form. I can tell you haven't seen this problem myself.

One thing that may help to isolate the issue is to take the tabs example in the download and render a form into it that reproduces the problem. Zip that up and upload it here. Then we will have a test case to work from. Please make the code in the test case clean and readable. Thanks.

[DeeZ]

Please find in attachment a ZIP file with the code needed to reproduce the problem. Unzip files in the "examples/form" folder

The file "testSafari.html" create a TabPanel with three tabs. Each tab is filled differently.

1) The first one is filled with a form using the bodyEl attribute:
myForm.render(panelItemTest[0].bodyEl);

2)The second one is filled with the setContent method:
panelItemTest[1].setContent('TEST');

3)The third one is field with the setUrl method:
panelItemTest[2].setUrl('index.html', null, true);

On Safari 2.0.4 (Mac OS), the first tab is not displayed correctly. It works fine on FF2, IE7 and Safari 3. For Safari 3.0, I tested only on Windows XP.

Thank you very much for your help.

[jack.slocum]

It worked fine for me. Safari 2.0.4 (419.3) on Mac OS.

However, I could see the possiblity of an issue arising with rendering into an inactive tab. I would change the code to render the form into the tab when it is activated.

tab.on('activate', function(){ .. then render form ..