[FIXED-587] Tab panel inside a form, mark invalid are in incorrect position [Archive]

thaiat

17 Feb 2010, 5:39 AM

Hi,

here is a quick and dirty example to reproduce behavior.

Once the window is open, click on the second tab, and then click on the button "show invalid". This will simply call getForm().isValid() and shows the mark invalid icons.
You will see if you go back to first tab (even layoutOnTabChange is true) that the icons are not in a good position.

var form = new Ext.form.FormPanel({
layout : 'vbox',
bodyStyle : 'padding: 5px;background-color: transparent',
layoutConfig : {
align : 'stretch'
},
items : [{
xtype: 'container',
layout : 'form',
defaultType : 'textfield',
defaults : {
anchor : '-20'
},
items : [{
fieldLabel : 'Field 1',
allowBlank : false
}]
}, {
xtype : 'tabpanel',
flex : 1,
activeTab : 0,
deferredRender : false,

layoutOnTabChange : true,
items : [{
title : 'Tab 1',
layout : 'form',
bodyStyle : 'padding: 5px;',
defaultType : 'textfield',
defaults : {
anchor : '-20'
},
items : [{
fieldLabel : 'Sub Field 1',
allowBlank : false
}]
},{
title : 'Tab 2',
layout : 'form',
bodyStyle : 'padding: 5px',
defaultType : 'textfield',
defaults : {
anchor : '-20'
},
items : [{
fieldLabel : 'Sub Field 2',
allowBlank : false
}]
}]
}],
buttons : [{
text : 'Show invalid fields',
handler : function() {
form .getForm().isValid();
}
}]

});
var win = new Ext.Window({
title : 'test',
width : 300,
height : 300,
border : false,
layout : 'fit',
items : form
});
win.show();

Cheers

Jamie Avins

2 Mar 2010, 4:17 PM

[type]: fix
[module]: Field
[id]: #669
[desc]: Fixes #587. Refs #451. alignErrorIcon will now be attached to a field's ownerCt afterlayout and expand events.

tobiu

3 Mar 2010, 7:01 AM

hi jamie,

glad to hear someone is finally on this issue =)

will your fix also work when the field is inside a fieldset inside a tab?
this happens in my app really often: autofocus one field, tab out, wrong alignment on tab back,

kind regards,
tobiu

Jamie Avins

3 Mar 2010, 9:10 AM

I tested this with tabs and fieldsets. If you have another testcase with specific nesting issues, I'd be glad to test them.

tobiu

3 Mar 2010, 9:37 AM

sure,

here is my testcase.
just push "step 1" and then "step 2".

<html>
<head>
<link rel="stylesheet" type="text/css" href="../ext-3.1.1/resources/css/ext-all-notheme.css">
<link rel="stylesheet" type="text/css" href="../ext-3.1.1/resources/css/xtheme-blue.css" id="theme">
<script src="../ext-3.1.1/adapter/ext/ext-base.js"></script>
<script src="../ext-3.1.1/ext-all.js"></script>
<script>
Ext.onReady(function(){

var tabs = new Ext.FormPanel({
labelWidth : 75
,border : false
,items: {
xtype : 'tabpanel'
,activeTab : 0
,deferredRender : false
,id : 'tp'
,anchor : '100% 100%'
,style : 'margin-bottom:10px;'
,defaults:{
autoScroll : true
,bodyStyle :'padding:10px;'
}
,items:[{
title : 'Personal Details',
layout : 'form',
id : 'tab1'
,items: [{
anchor : '-20'
,autoHeight : true
,title : 'Customer'
,checkboxName : 'checkAnimation'
,checkboxToggle : true
,xtype : 'fieldset'
,defaults: {
anchor : '-22'
,width : 230
,msgTarget : 'side'
},
defaultType: 'textfield',
items :[{
fieldLabel: 'First Name',
allowBlank: false,
name: 'first',
id: 'focus1'
},{
fieldLabel: 'Last Name',
allowBlank: false,
name: 'last'
},{
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax'
}]
}]
},{
title : 'Phone Numbers'
,layout : 'form'
,id : 'tab2'
,defaults : {
width : 230
,anchor : '-22'
,msgTarget : 'side'
}
,defaultType: 'textfield',

items: [{
fieldLabel: 'Home',
allowBlank: false,
name: 'home',
value: '(888) 555-1212'
}, {
fieldLabel: 'Email',
allowBlank: false,
name: 'email',
vtype:'email'
},{
fieldLabel: 'Business',
name: 'business'
},{
fieldLabel: 'Mobile',
name: 'mobile'
},{
fieldLabel: 'Fax',
name: 'fax',
style:'margin-bottom:10px;'
}]
}]
}
});

var myWindow = new Ext.Window({
height : 400
,border : false
,layout : 'fit'
,title : 'a window'
,width : 400
,items : tabs
,buttons: [{
text: 'Step 1',
handler : function(){
Ext.getCmp('focus1').focus();
Ext.getCmp('tp').setActiveTab(1);
}
},{
text: 'Step 2',
handler : function(){
Ext.getCmp('tp').setActiveTab(0);
}
}]
});

myWindow.show();
});
</script>
</head>
<body></body>
</html>

originally postet under ext-2.2.1-bugs
http://www.extjs.com/forum/showthread.php?t=64942

kind regards,
tobiu

Jamie Avins

3 Mar 2010, 10:18 AM

You'll want to use layoutOnTabChange: true with the latest SVN 3.2.x branch and this works.

tobiu

3 Mar 2010, 11:13 AM

ok, with that config the tabpanel calls the fieldset.doLayout where there are listeners now for each error icon, if i got it right. lets hope this will work for deeper nested layouts also.

since i only have a commercial license and no support subscription yet, i will have to way to the release of 3.2. but i will tell you afterwards if it works for me ;)

kind regards,
tobiu

Jamie Avins

3 Mar 2010, 11:22 AM

'layoutOnTabChange: true' is recursive...