PDA

View Full Version : Form layout: fields w/ 100% width and autoScroll: true



Skay
11 Jul 2010, 4:10 AM
I've got a form with several fields. I'd like to stretch them horizontally. I set default options to layout:


defaults: {
anchor: '100%'
}


it works, but when we have vertical scrolling there is a horizontal one too (see screenshot_1). If i set anchor: '-20' ( reserved space for scrolling), we have 20px white space when page has no vertical scrolling (see screenshot_2).

How to config layout that will stretch field as expected - with no space and no horizontal scrolling?

Condor
11 Jul 2010, 11:49 AM
The browser doesn't trigger an event when a scrollbar becomes visible, so Ext doesn't have a way to adjust for the scrollbar.

The only thing you could do is render the fields with anchor:'0' and when all fields are rendered, check if a scrollbar is visible. If it is visible you adjust all anchors to '-20' and relayout.

ps. I don't like the solution and just use '-20' everywhere.

Skay
11 Jul 2010, 12:15 PM
The browser doesn't trigger an event when a scrollbar becomes visible, so Ext doesn't have a way to adjust for the scrollbar.

you are right. But if we want to make div tag stretch 100% we set 'width: 100%' in css and dont need any javascript events)) so, why formpanel cant work on the same principal?

Condor
11 Jul 2010, 12:27 PM
That works for a single element, but form fields are made up of several elements that won't follow the width:'100%' of the wrap.