PDA

View Full Version : Carousel and Form



wensington
2 Nov 2011, 8:28 PM
I am trying to add put form fields in carousel. It seems that if I put more than 6 fields, they get cutoff (e.g. the 7th field only partially show). If I use a panel then everything is fine. Is there a way to make form fields working in carousel?

Thanks!

AndreaCammarata
3 Nov 2011, 12:04 AM
Hi.
You need to add the scroll config to your form.
Take a look at the example I wrote you.



Ext.setup({
onReady: function() {


var carousel = new Ext.Carousel({
fullscreen: true,
items: [
{
xtype: 'formpanel',
scroll: 'vertical',
items: [
{
xtype: 'fieldset',
title: 'Personal Info',
instructions: 'Please enter the information above.',
defaults: {
labelAlign: 'left',
labelWidth: '40%'
},
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name',
useClearIcon: true,
autoCapitalize : false
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password',
useClearIcon: false
},
{
xtype: 'textfield',
name : 'disabled',
label: 'Disabled',
disabled: true,
useClearIcon: true
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email',
placeHolder: 'you@sencha.com',
useClearIcon: true
},
{
xtype: 'urlfield',
name : 'url',
label: 'Url',
placeHolder: 'http://sencha.com',
useClearIcon: true
},
{
xtype: 'checkboxfield',
name : 'cool',
label: 'Cool',
value: true
},
{
xtype: 'spinnerfield',
name : 'spinner',
label: 'Spinner'
},
{
xtype: 'textfield',
name : 'secret',
label: 'Secret'
},
{
xtype : 'textareafield',
name : 'bio',
label : 'Bio',
maxLength : 60,
maxRows : 10
},
{
xtype: 'sliderfield',
name : 'height',
label: 'Height'
},
{
xtype: 'togglefield',
name : 'enable',
label: 'Security Mode'
},
{
xtype: 'radiofield',
name: 'team',
label: 'Red Team',
value : 'redteam'
},
{
xtype: 'radiofield',
name: 'team',
label: 'Blue Team',
value: 'blueteam'
}
]
}
]
},
{
html: 'Card 2'
}
]
});

}
});



Hope this helps.

mitchellsimoens
3 Nov 2011, 6:56 AM
Just be careful that you cannot have both the Carousel and FormPanel scroll in the same way.