PDA

View Full Version : [CLOSED][3.1] Field width = 0 after browser resize



fermo111
19 Dec 2009, 4:53 PM
Browser: FF 3.5.6
OS: Ubuntu 9.10
ExtJS: 3.1.0

Run the following code sample. There is a collapsed fieldset.
1) Click on the fieldset checkbox. The fieldset expands correctly.
2) Reload the page. Resize the browser. Click on the fieldset checkbox. The 2 fields inside the fieldset have width = 0

This problem started with v. 3.1.0.


Ext.onReady(function(){

var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data : Ext.exampledata.states // from states.js
});

var tabs = new Ext.TabPanel({
width: 400,
height: 300,
activeTab: 0,
deferredRender: false,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: {
xtype:'form',
title: 'Tab1',
labelWidth: 75,
items:[{
xtype: 'fieldset',
checkboxToggle: true,
title: 'User Information',
autoHeight: true,
defaultType: 'textfield',
collapsed: true,
items :[{
fieldLabel: 'State',
name: 'state',
xtype: 'combo',
store: store,
displayField:'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true
}, {
xtype: 'datefield',
fieldLabel: 'Date',
name: 'date'
}
]
}]
}
});

tabs.render(document.body);
});

Animal
20 Dec 2009, 1:01 AM
What width do you want them to be? Give Ext some clue as to what it should do!!!

fermo111
20 Dec 2009, 2:15 AM
What width do you want them to be? Give Ext some clue as to what it should do!!!

That's right. The problem does not appear if the fields are given a width. But I left it out on purpose, to show that Ext behavior has changed in 3.1.0. Before, it was not necessary indicate the width: Ext would give them a default value.

Unless there is indeed a change in ext behavior, and now the width is mandatory, I think this is a bug in the new rendering/layout

fermo111
20 Dec 2009, 3:55 AM
After some more debugging, I noticed that the problem concerns only the Ext.form.TriggerField and its subclasses and it has to do with the new 'updateEditState()' method.

EDIT: updateEditState() executes the following line
this.onResize(this.width || this.wrap.getWidth()); and the argument is 0.

hendricd
22 Dec 2009, 11:16 AM
@fermo111 -

Using the latest 3.1 SVN build, I have not been able to replicate your issue Win-FF, IE, Safari (even though you are foregoing the typical width specification).

Can you snapshot something for us to look at from Ubuntu ?

fermo111
22 Dec 2009, 1:28 PM
Hi Doug

I do not have access to the SVN. I used the .zip file from ExtJS downloads page.
I have double checked, both under Ubuntu and Windows XP, using FF 3.5.6 (ubuntu) and FF 3.5.5 (windows). Both show the same identical problem. Just let me explain again what it is.

1) with the code below, click on the check box and you see the first picture
2) reload the page, resize the browser window, click on the check box and you see the second picture

The full code follows. I have created the file in the examples/form directory.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Forms</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="states.js"></script>
<link rel="stylesheet" type="text/css" href="forms.css"/>
<link rel="stylesheet" type="text/css" href="../shared/examples.css"/>
<script type="text/javascript" src="../shared/examples.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

var store = new Ext.data.ArrayStore({
fields: ['abbr', 'state', 'nick'],
data: Ext.exampledata.states
});

var tabs = new Ext.TabPanel({
width: 400,
height: 300,
activeTab: 0,
deferredRender: false,
defaults: {
autoHeight: true,
bodyStyle: 'padding:10px'
},
items: {
xtype: 'form',
title: 'Tab1',
labelWidth: 75,
items: [{
xtype: 'fieldset',
checkboxToggle: true,
title: 'User Information',
autoHeight: true,
defaultType: 'textfield',
collapsed: true,
items: [{
fieldLabel: 'State',
name: 'state',
xtype: 'combo',
store: store,
displayField: 'state',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText: 'Select a state...',
selectOnFocus: true
}, {
xtype: 'datefield',
fieldLabel: 'Date',
name: 'date'
}]
}]
}
});

tabs.render(document.body);
});
</script>
</head>
<body>
</body>
</html>

hendricd
22 Dec 2009, 1:44 PM
@fermo111 -- Thanks, I see it now.

I'll be back when I find out more...

hendricd
23 Dec 2009, 9:26 AM
@fermo111-

The body of a collapsed FieldSet (Inherited from Ext.Panel) is hidden via display:none, thus nothing in it will have any size metrics with which to handle the absence of specific widths (especially after an unstoppable full-page DOM reflow occurs when the browser is resized).

Again, specifying field widths is paramount for this type of layout.
Marking this closed.