PDA

View Full Version : scroll bar does not show up



sj_tt6
19 Jan 2013, 9:18 AM
Hello,

I create a registration form with a form panel. In this form panel I add several fieldsets and fieldcontainers which have textfields and other components. I add the autoScroll:true to the form panel. However the scroll bar does not show up and I can not see the other components of the form including buttons at the bottom.

I have tried overflowY:'auto' as well but the scroll bar is still not seen.

Please show me how to fix this problem. Thanks!

existdissolve
19 Jan 2013, 9:46 PM
Can you post your code?

sj_tt6
20 Jan 2013, 8:38 AM
This is my form


Ext.define('MyApp.view.RegistrationView', {
extend: 'Ext.form.Panel',
id: 'registration_view',
alias: 'widget.registration_view',
frame:true,
border:true,
autoScroll:true,
fieldDefaults: {
labelWidth: 150
},
items: [
{
xtype: 'fieldset',
height: 140,
width:820,
collapsible: true,
margin: '10, 0, 22, 450',
title: '<span class="fieldset_title">Account </span>',
defaults: {
labelClsExtra: 'label'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Username',
name: 'resident_username',
id: 'resident_username',
allowBlank: false,
anchor: '50%'
},{
xtype: 'textfield',
fieldLabel: 'Password',
...
],
],
dockedItems: [{
xtype: 'container',
dock: 'bottom',
layout: {
type: 'hbox',
align: 'middle'
},
width:300,
padding: '10 10 5',
margin: '0, 0, 0, 950',
items: [{
xtype: 'button',
formBind: true,
disabled: true,
text: 'Register',
id: 'register_btn',
width: 90,
height: 40,
action: 'resident_register'

},{
xtype: 'button',
text: 'Cancel',
id:'cancel_btn',
width: 90,
height: 40,
action: 'reg_cancel'
},{
xtype: 'button',
text: 'Clear form',
id: 'clear_btn',
width: 90,
height: 40,
action: 'clear'
}]
}]
});

existdissolve
20 Jan 2013, 9:10 AM
What's the context in which this is used? Is it contained by another component, or stand alone? If stand-alone, you'll probably need to put a height on the panel so it doesn't grow infinitely vertically. If it's in another component, make sure the configuration of that component's layout will work with what you're trying to do.

Also, I would strongly suggest that you avoid putting hard widths on your elements. If possible, allow ExtJS and the layout managers handle the widths for you. This will allow you app components to be a lot more flexible in a various scenarios.

sj_tt6
20 Jan 2013, 9:59 PM
Hi existdissolve,

Thank you for your reply!

My form panel is in a viewport that has the layout=fit. I tried to set autoScroll:true to the viewport and the scroll bar showed up but it was only up to above the bottom dockItems where 3 buttons located and these were out of the screen. So I could not see the bottons.
I also tried to add the height to my form panel although it was not standalone like you said and the same thing happened.
I think I make some mistakes with the configurations either in the view port or form panel. Can you tell me how to make the scroll bar that can scroll the whole form panel including the bottom dock items.

Thanks,