PDA

View Full Version : Formpanel embedded into a carousel causes too big sized fieldset



gulsan
9 Oct 2011, 12:56 AM
Hi,


I want a carousel with a formpanel as its first element. But the fieldset shows much much
bigger than it's actually necessary. I suspect that the fieldset gets its width and height size from the formpanel.
Here's an example js and css code:

index.js


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {


var form1 = new Ext.form.FormPanel({
scroll: 'vertical',
layout: 'vbox',
cls: 'formCls',
items: [
{
xtype: 'fieldset',
defaults: {
labelAlign: 'left', labelWidth: '25%'
},
items: [
{
xtype: 'textfield',
name : 'nachname',
label: 'Nachname',
useClearIcon: true
},
{
xtype: 'textfield',
name : 'vorname',
label: 'Vorname',
useClearIcon: true
}
]
}
]
});

var carousel = new Ext.Carousel({
direction: 'horizontal',
cls: 'carousel-panel',
items: [
form1,
{
xtype: 'panel',
html: 'Some other components'
}
]
});


var wholePanel = new Ext.Panel({
layout: 'vbox',
fullscreen: true,
scroll: true,
items: [carousel]
});
}
});



app.css


.carousel-panel .x-carousel-body {
background-color: #FCF87B !important;
background-image: none !important;
height: 400px !important;
width: 700px !important;
border:4px solid #ccc; }

.formCls .x-panel-body {
background-image: none !important;
background-color: #fff !important;
width: 650px !important;
height: 350px !important;
border:4px solid #000; }






Could you please tell me why I don't get a properly sized fieldset?

gulsan
11 Oct 2011, 2:20 AM
Actually I thought that experienced Sencha Touch developers would know my problem's solution :-(