PDA

View Full Version : Panel components move on show in firefox



kevj
11 Nov 2009, 5:59 PM
When rendering the panel below in firefox, the textfield on the right starts touching the one on the left and then gets repositioned. Admittedly, it's pretty quick, but when there's lots of fields in a big form it gets quite noticeable.

I'm probably missing something obvious. However, I noticed this behaviour goes away if you remove both values from the fields.



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Title</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-debug.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../resources/images/default/s.gif';

Ext.onReady(function(){

var panel = new Ext.Panel({
title: "Test Panel",
width: 600,
height: 200,
items: [{
layout: "column",
items: [{
columnWidth: .5,
xtype: "form",
defaults: {
xtype: "textfield"
},
items: [{
fieldLabel: "Name",
value: "wibble"
}]
}, {
columnWidth: .5,
xtype: "form",
defaults: {
xtype: "textfield",
},
items: [{
fieldLabel: "Name",
value: "wobble"
}]
}]
}]
});

panel.render(Ext.getBody());

});
</script>

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