PDA

View Full Version : [CLOSED] IE Bug with datefield and combobox (anchor '100%')



tuak
8 Jan 2011, 5:15 AM
Ext versions tested:


Ext 3.3.1, 3.2.1, 3.0.3, 3.0.0 and 2.2.1

Adapter used:


ext

CSS used:


only default ext-all.css

Browser versions tested against:


IE6, IE8 and FF3.6

Operating System:


WinXP Pro

Description:

Hi,

sorry for the double post but I think this is a bug. That's why I open a new thread in "Ext: Bugs".

In my first code I use a border layout with a center tabpanel and an east panel. I put in this tabpanel a formpanel with some form elements in it (anchor '100%'). The position of the datefield is not correct in IE6 & IE8. Only FF 3.6 shows the elements as expected. I've tried the code with different Ext JS 3 Versions. The code only works with Ext JS 2.2.1 for IE6, IE8 and FF3.6.

My second code is similar. I just use a border layout with a center formpanel with some form elements in it (anchor '100%'). If I collapse the east panel and then expand it the position of the combobox is not correct anymore in IE6 and IE8. Also this code has been tested with different Ext JS 3 versions. It only works with Ext JS 2.2.1 for the different browsers.

I've attached some screenshots and the codes. I hope someone can help me. Thanks in advance.

@Forum moderators or administrators
Can one of you please delete my other thread to avoid the double post? (http://www.sencha.com/forum/showthread.php?119987-Rendering-problem-for-datefield-with-anchor-100&highlight=layout+form+anchor)

Test Case Nr. 1:



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

Ext.BLANK_IMAGE_URL = '../3.3.1/resources/images/default/s.gif';

Ext.onReady(function(){
var myViewPort = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'tabpanel',
region: 'center',
activeTab: 0,
items: [{
xtype: 'form',
title: 'myFormPanelInMyTabPanel',
labelWidth: 120,
frame: true,
/*
defaults: {
anchor: '100%'
},
*/
items: [{
xtype: 'textfield',
fieldLabel: 'myTextField1',
anchor: '100%'
},{
xtype: 'datefield',
fieldLabel: 'myDateField1',
anchor: '100%'
//anchor: '70%'
},{
xtype: 'textfield',
fieldLabel: 'myTextField2',
anchor: '100%'
},{
xtype: 'textfield',
fieldLabel: 'myTextField3',
anchor: '100%'
}]
}]
},{
xtype: 'panel',
region: 'east',
title: 'myPanel',
frame: true,
collapsible: true,
width: 400
}]
});
});

</script>
</head>
<body>
</body>
</html>


Screenshots for Test Case Nr. 1:

IE6:
24171

IE8:
24170

Test Case Nr. 2:


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

Ext.BLANK_IMAGE_URL = '../3.3.1/resources/images/default/s.gif';

Ext.onReady(function(){

var myViewPort = new Ext.Viewport({
layout: 'border',
items: [{
xtype: 'form',
region: 'center',
title: 'myFormPanel',
labelWidth: 120,
frame: true,
/*
defaults: {
anchor: '100%'
},
*/
items: [{
xtype: 'textfield',
fieldLabel: 'myTextField',
anchor: '100%'
},{
xtype: 'combo',
fieldLabel: 'myComboBox',
anchor: '100%'
//anchor: '70%'
},{
xtype: 'textfield',
fieldLabel: 'myTextField2',
anchor: '100%'
}]
},{
xtype: 'panel',
region: 'east',
title: 'myPanel',
frame: true,
collapsible: true,
width: 400
}]
});

});
</script>
</head>
<body>
</body>
</html>


Screenshots for Test Case Nr. 2:

IE6 - after expand:
24167

IE8 - after expand:
24169

Condor
8 Jan 2011, 7:26 AM
It's a repaint problem. You'll notice that if you mouseover the incorrectly aligned combobox is snaps into place.

To avoid it, anchor layout would have to resize the child items before resizing the container when it shrinks but the other way around when it grows.

tuak
8 Jan 2011, 10:22 AM
Thank you Condor. Your hint solved my problem.