PDA

View Full Version : [CLOSED] No scrollbars for form panel inside accordion



mpost
8 Apr 2013, 4:35 PM
REQUIRED INFORMATIONExt version tested:

Ext 4.1.1a
Ext 4.2
Browser versions tested against:

Safari 6.0.3
Chrome 26.0.1410.43
DOCTYPE tested against:

html
Description:

When I have a form panel inside an accordion layout, I'm not seeing any scrollbars even though autoScroll is set to true.
Steps to reproduce the problem:

Run the attached fiddle.
The result that was expected:

Horizontal scrollbar appears because parent container is too small.
The result that occurs instead:

Content inside the form panel is clipped, no option to scroll.
See this URL for live test case: http://jsfiddle.net/sPcgG/4/

* (http://jsfiddle.net/sPcgG/4/)EDIT BY SLEMMON
In 4.2
Vertical scrollbars will show if content overflows on the Y axis, but don't ever see the horizontal scrollbar. The vertical scrollbar has space reserved in Firefox 20 even when not overflowing vertically.


Ext.widget('panel', {
title: 'No Scrollbars',
renderTo: Ext.getBody(),
width: 200,
height: 300,
resizable: true,
layout: 'accordion',
items: [{
xtype: 'form',
region: 'north',
title: 'north',
collapsible: true,
flex: 1,
autoScroll: true,
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field One'
}, {
xtype: 'displayfield',
value: 'mph'
}]
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field Two'
}, {
xtype: 'displayfield',
value: 'deg'
}]
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field Three'
}, {
xtype: 'displayfield',
value: 'MHz'
}]
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field One'
}, {
xtype: 'displayfield',
value: 'mph'
}]
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field Two'
}, {
xtype: 'displayfield',
value: 'deg'
}]
}, {
xtype: 'fieldcontainer',
layout: 'hbox',
items: [{
xtype: 'numberfield',
fieldLabel: 'Field Three'
}, {
xtype: 'displayfield',
value: 'MHz'
}]
}]
}, {
xtype: 'panel',
title: 'center'
}, {
xtype: 'panel',
title: 'south'
}]


});

slemmon
9 Apr 2013, 7:19 AM
Thanks for the report! I have opened a bug in our bug tracker.

*As an aside, you're overnesting a bit in your example. In the accordion panel you can have the form be the child item of that panel - don't need the panel component in between the form and the accordion panel.

mpost
9 Apr 2013, 8:03 AM
Indeed you're correct about the over nesting. Fortunately this is a contrived example; my actual code does not suffer from the over nesting, but I'm glad someone made me verify it. :)