PDA

View Full Version : [OPEN-1132][3.3.0] Layout form and anchor problem in IE8



galdaka
14 Jul 2010, 10:59 PM
Ext version tested:

Ext 3.3.1 (3.1.1 does not have the bug)


Adapter used:

ext


css used:

All themes


Browser versions tested against:

Firefox 3.3.6
IE8
Chrome


Operating System:

Windows XP Proffesional.
Description & code:


items: [{
xtype: 'container',
id: 'cTab02Container',
layout: 'form',
labelWidth: 140,
style: {
'margin-top' : '10px',
'margin-left' : '10px'
},
defaults: {
anchor: '98%',
allowBlank: false
},
defaultType: 'textfield',
items: [{
fieldLabel: '<b>Nombre</b>',
id: 'eIncluirCurriculum',
style: 'margin-bottom: 25px'
},{








...






Steps to reproduce the problem:

Create a tabpanel and in one tab create a container with layout form and anchor (percentage) for each item.
The result that was expected:

The anchor is applied for each item correctly.


The result that occurs instead:

The anchor in IE8 is incorrect. I attach one image.
http://www.jadacosta.es/contents/screencast/anchorbug.jpg

evant
14 Jul 2010, 11:43 PM
Can't reproduce this.

Please post a test case.



Ext.onReady(function(){
new Ext.TabPanel({
renderTo: document.body,
width: 400,
height: 400,
items: {
title: 'Foo',
xtype: 'container',
layout: 'form',
items: {
anchor: '98%',
xtype: 'textfield',
fieldLabel: 'Field 1'
}
}
});
});

galdaka
15 Jul 2010, 3:04 AM
I atach a example: http://www.jadacosta.es/contents/screencast/test01.zip

Greetings,

Animal
15 Jul 2010, 3:15 AM
Evan illustrates a testcase that works, so it seems clear that there is just a bug in your code. Probably a missing layout config.

You're not seriously suggesting that someone's going to debug all that for you?

galdaka
15 Jul 2010, 3:26 AM
Sorry but there is no errors.

In 3.1.1 works fine. When I upgrade to 3.3.0 the anchor 98% is incorrect. I think that threre is a bug in 3.3.0 or problem in 3.3.0 with my code. But there is no errors in browser.

I donĀ“t Know hot to debug.

evant
15 Jul 2010, 3:33 AM
That's not really a serviceable test case, there's so much extra code there it makes it incredibly difficult to identify whether there's a problem with your code, or there's a genuine bug. Please post a minimal test case (similar to mine) that demonstrates the problem.

galdaka
15 Jul 2010, 10:25 AM
I modified the example for make more compresive.

Please click in http://www.jadacosta.es/contents/screencast/test01.zip

Greetings,

kjleng
12 Nov 2010, 4:23 PM
I'm also having this problem in the released 3.3.0

I have the issue when I add textfields to tooltips.

My tooltip has a layout of form, and the textfield is set to anchor 100%

kjleng
15 Nov 2010, 10:30 AM
I got my tooltips working. They were having the same problem on all browsers:



var tip = new Ext.ToolTip({
// width:250,
boxMinWidth: 250,
trackMouse:false,
anchorToTarget:true,
renderTo:Ext.getBody(),
target:this.addTagBtn.el,
anchor:'left',
layout:'form',
autoHide:false,
labelAlign:'top',
items:[
{xtype:'textfield',fieldLabel:'test', anchor:'100%'}
]
});


When I was using width, anchoring would not work. If I removed the width the anchoring would work to the box components min width, so I just set the minWidth and everything worked after that.

Cheers

leizz
23 Nov 2010, 6:49 AM
I also have similar problem:

Version: Ext 3.3.0
Step to reproduce:
1. use the code below, with the combo attribute "anchor" set to 100%
2. had following error in all IE8 modes except "IE 7 Quirks" mode:

Message: Invalid argument.
Line: 2415
Char: 13
Code: 0
URI: http://localhost/ext-3.3.0/ext-all-debug.js
3. remove the "anchor: '100%'" line from the combo definition and everything works fine


html page:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>myApp.html</title>
<link rel="stylesheet" type="text/css"
href="http://localhost:/ext-3.3.0/resources/css/ext-all.css" />
<script type="text/javascript"
src="http://localhost:/ext-3.3.0/adapter/ext/ext-base.js"></script>

<script type="text/javascript"
src="http://localhost:/ext-3.3.0/ext-all-debug.js"></script>

<script type="text/javascript" src="test.js"></script>


<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'http://localhost:/ext-3.3.0/resources/images/default/s.gif';
Ext.onReady( function(){

Ext.QuickTips.init();

// initialize my page controller with page specific settings
var cmp1 = new TestFormUi({
renderTo: Ext.getBody()
});
cmp1.show();

}); //end onReady

</script>



</head>
<body>

</body>

</html>
JS code:

var testStore = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
storeId: 'testStore',
// reader configs
idIndex: 0,
fields: [
{name:'desc'},
{name: 'code'} ],
data: [['abc','1'],['def', '2']]
});


TestFormUi = Ext.extend(Ext.form.FormPanel, {
title: 'TestFormUi ',
width: 480,
height: 350,
collapseFirst: false,
titleCollapse: true,
header: true,
padding: 10,
labelWidth: 260,
autoWidth: true,
autoHeight: true,
footer: true,
style: 'margin:10pt;',
initComponent: function() {
this.items = [
{
xtype: 'fieldset',
title: 'Need Help?',
autoScroll: true,
autoHeight: true,
autoWidth: true,
collapsible: true,
animCollapse: true,
header: true,
collapseFirst: false,
items: [
{
xtype: 'label',
text: 'Tell us more about yourself'
},
{
xtype: 'spacer',
height: 24
},
{
xtype: 'combo',
fieldLabel: 'wireBundle.label.wireTypeQuery.customerType',
name: 'customerType',
hiddenName: 'customerType',
autoWidth: true,
store: 'testStore',
anchor: '100%',
mode: 'local',
displayField: 'desc',
valueField: 'code',
editable: false,
triggerAction: 'all'
} ]
} ];

TestFormUi.superclass.initComponent.call(this);
}
});
leiz

Animal
24 Nov 2010, 2:32 AM
autoWidth conflicts with anchor

galdaka
30 Dec 2010, 8:01 AM
I try with: autoWidth: true, autoWidth: false and nothing.

The result is the same: Error in IE.

galdaka
3 Jan 2011, 6:52 AM
Similar problem here: http://www.sencha.com/forum/showthread.php?119974-Component-Width-Problem&highlight=layout+form+anchor

http://www.sencha.com/forum/showthread.php?119987-Rendering-problem-for-datefield-with-anchor-100&highlight=layout+form+anchor

devtig
3 Jan 2011, 7:52 AM
Minify your code http://www.jadacosta.es/contents/screencast/test01.zip as much as possible so that the bug still occurs. In other words, take away as many lines as possible so that the error still occurs. Then post your code here on the forum.