sample code, that shows render problem
HTML Code:
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="file-upload.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="FileUploadField.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';
</script>
<script type="text/javascript" src="test.js"/>
</head>
<body>
</body>
</html>
test.js:
PHP Code:
Ext.onReady(function(){
var form = new Ext.form.FormPanel({
fileUpload:true,
hidden:true,
//if hidden:false textfield shows normal
items:[{xtype:'fileuploadfield',
width:200}]
//if we not define width textfield also shows normal
});
button = new Ext.Button({
text:'show',
handler:function(){
form.show();
}
});
new Ext.Viewport({
layout: 'border',
items: [{xtype:'panel',region:'center',items:[form],buttons:[button]}]
});
});
after render hidden text field has style width:0 that not changes after it comes visible
when form renders visible width calculates correctly.