PDA

View Full Version : [OPEN-1113] FileUpload Field is rendered wrong in a TabControl



Qtx
8 Jul 2010, 10:41 AM
I have a TabControl with a FileUpload field. I have to set deferredRender: false, because I need all fields in the REQUEST also those from never activated tabs. I set, of cause, layoutOnTabChange: true.

I worked in 3.1.1 and 3.2.0 but does not work any more in 3.2.1. Here is the code - hell2.html. Place it in the directory 'examples/window'.


<!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>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ux/fileuploadfield/css/fileuploadfield.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="../ux/fileuploadfield/FileUploadField.js"></script>

<script language="javascript">

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
template_properties_form = new Ext.FormPanel({
border: false,
layout: 'fit',
trackResetOnLoad: true,
fileUpload: true,

items: current_tab_control = new Ext.TabPanel({
activeTab: 0,
width: 500,
height: 250,
plain: false,
border: false,
enableTabScroll:true,
animScroll: false,
deferredRender: false,
layoutOnTabChange: true,
defaults:{autoScroll: true},
items:[
{
id: 'template_properties_common',
title: 'Properties',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
style: 'padding: 5px 5px 5px 5px',

items: [
{
frame: true,
collapsible: false,
layout:'form',
bodyStyle: 'background-color: transparent',
style: 'margin-bottom: 5px',
width: 500,

autoHeight:true,

defaults: { anchor: '0' },
labelWidth: 168,
defaultType: 'textfield',
items: [
{
xtype: 'hidden',
id: 'old_template',
name: 'old_template'
},
{
fieldLabel: 'Name*',
id: 'template',
name: 'template'
},
{
fieldLabel: 'DocType',
id: 'doctype',
name: 'doctype'
},
{
fieldLabel: 'Picture',
xtype: 'fileuploadfield',
id: 'template_picture',
emptyText: 'Select picture',
name: 'template_picture',
buttonText: '',
buttonCfg: {
icon: 'images/icons/folder.png'
}
}
]
}
]
},
{
id: 'template_carcass',
title: 'Carcass',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
layout: 'border',

items:
{
margins: '5 5 5 5',
region: 'center',
border: true,
collapsible: false,
xtype: 'textarea',
id: 'carcass',
name: 'carcass'
}
},
{
id: 'template_css',
title: 'CSS',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
style: 'padding: 5px 5px 5px 5px',
layout: 'fit',

items:
{
border: true,
collapsible: false,
style: 'font-family: Courier New; font-size: 12px; white-space: nowrap;',
xtype: 'textarea',
id: 'css',
name: 'css'
}
},
{
id: 'template_js',
title: 'JS',
cls: 'x-border-layout-ct',
bodyStyle: 'background-color: transparent',
style: 'padding: 5px 5px 5px 5px',
layout: 'fit',

items:
{
border: true,
collapsible: false,
style: 'font-family: Courier New; font-size: 12px; white-space: nowrap;',
xtype: 'textarea',
id: 'js',
name: 'js'
}
}
]
}),

listeners: {
render: function (panel) {
}
} // listeners
});

template_properties_window = new Ext.Window({

title: 'Template',

width: 700,
height: 494,

closeAction: 'close',
plain: true,
modal: true,

maximizable: false,
minimizable: false,
resizable: false,

layout: 'fit',
items: template_properties_form,

buttons: [
{
text: 'Close',
handler: function(){ template_properties_window.close(); }
}
]
});

template_properties_window.show();
});
});
</script>
</head>
<body>

<input type="button" id="show-btn" value="Show Window" />
</body>
</html>

Qtx
8 Jul 2010, 10:54 AM
Comparing the same example file in 3.2.0 and 3.2.1 in FireBug revealed

in 3.2.0
element.style {
width:0;


}

in 3.2.1
element.style {
width:282px;


}