PDA

View Full Version : FormPanel "autoScroll:true" - horizontal scrollbar *always* appearing!



pete7au
25 Sep 2010, 9:43 PM
Anyone know why the horizontal scrollbar is appearing unnecessarily?

See attachment "scrollbars.jpg" to see what the below example code does.


Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'north',
height: 50
},
{
region: 'south',
height: 50
},
{
region: 'east',
width: 50
},
{
region: 'west',
width: 50
},
{
region: 'center',
layout: 'fit',
items: [
{
layout: 'border',
items: [
{
region: 'north',
height: 50
},
{
region: 'south',
height: 50
},
{
region: 'east',
width: 50
},
{
region: 'west',
width: 50
},
{
region: 'center',
layout: 'fit',
items: [
{
xtype: 'form',
autoScroll: true,
items: [
{
xtype: 'fieldset',
title: 'Test Fieldset',
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Test Checkboxgroup',
columns: 1,
items: [
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
});

Animal
25 Sep 2010, 10:01 PM
Overnested. Sort it out!

pete7au
25 Sep 2010, 10:06 PM
"Overnested" to highlight the problem which is a valid use.

For everyone else who may encounter this issue here is one solution I just found.

Encapsulate the FormPanel in a Panel with autoScroll (and remove autoScroll from the FormPanel).


Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'north',
height: 50
},
{
region: 'south',
height: 50
},
{
region: 'east',
width: 50
},
{
region: 'west',
width: 50
},
{
region: 'center',
layout: 'fit',
items: [
{
layout: 'border',
items: [
{
region: 'north',
height: 50
},
{
region: 'south',
height: 50
},
{
region: 'east',
width: 50
},
{
region: 'west',
width: 50
},
{
region: 'center',
layout: 'fit',
items: [
{
xtype: 'panel',
autoScroll: true,
items: [
{
xtype: 'form',
//autoScroll: true,
items: [
{
xtype: 'fieldset',
title: 'Test Fieldset',
items: [{
xtype: 'checkboxgroup',
fieldLabel: 'Test Checkboxgroup',
columns: 1,
items: [
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
},
{
xtype: 'radio',
boxLabel: 'Test Radio 1'
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
});
});

Animal
25 Sep 2010, 10:11 PM
No, it's just too mad to even look at.

A center which is a fit which contains a border who's center is a fit which contains a form which...

You can't be serious!

Make the center a form panel.

pete7au
25 Sep 2010, 10:16 PM
Mad to look at this way yes, in code generating the ui no.

You seemed to follow what I was doing easily enough.

Deadly serious.

If it was a form panel then I couldn't lay it out like a border layout now could I :)

Animal
25 Sep 2010, 10:19 PM
If it was a form panel then I couldn't lay it out like a border layout now could I :)

What on EARTH would give you that idea?

pete7au
25 Sep 2010, 10:25 PM
So ... form panel with border layout with fieldset in the center region (which scrolls vertically) & buttons in the south region?

pete7au
26 Sep 2010, 2:45 PM
FormPanel with border layout works but you will still need to wrap your fieldset(s) in an outer panel to fix the horizontal scrollbar issue as documented above, i.e.


{
region: 'center',
layout: 'fit',
items: [
{
xtype: 'panel',
autoScroll: true,
items: [
{
ref: 'fieldsetsgohere'
}]
}]
}