PDA

View Full Version : Suggestion - more (or easier) layouts for formpanel



jove4015
27 May 2008, 12:55 PM
Hi,

I just know I'm going to get a bunch of negative replies, but here goes...

I think the FormPanel would be a lot more useful if it were easier to lay things out inside of it.

All I wanted to do was set up a form in a floating window with 2 columns. Sounds simple... at least from the perspective of basic HTML (ok, maybe not the floating part, but still with just a DD class it could be managed fairly simply). Anyway, it must have taken 6 hours to put together...

Some of it's probably just lack of documentation (teasing out how AnchorLayout works takes forever, the existing documentation for this is very confusing and limited - something which I know you guys are working on). In general, though, the framework seems to favor very simple forms, maybe containing a tabpanel - which works well - but not columns, or a table layout, features which elsewhere in the system work out very easily. Unfortunately, if you've ever looked at a paper form (take a look at your W2 sometime), the layout is almost always tabular with multiple columns (and multiple sets of columns). Simply changing the layout of the form to fit the framework isn't always an option - sometimes the form is just too big, you'd end up spending most of your day scrolling.

In my case, I had to put each column as a basic Ext.Panel with layout "form" inside of a FormPanel with layout "column", inside a window with layout "fit", and then manually set the height of each column on window resize. Not exactly a clean solution, but finally something that works. It would have gone easier with a border layout but that was *just not happening* - nothing would display at all, one panel would have 0 width and the other would be offset 400 pixels to the left of the window - although I specificed quite different config options from this. Also tried using the form layout itself (using the anchor property on each panel) but this did not work - each panel took up 50% of the width, and each was flush left. With absolute layout, better, but then the second column, which was set to 50% width, somehow just would not actually get 50% width (something more like 45% would actually happen).

I really expected to spend maybe 25% of the time on layout and most of the time on functionality, but it ended up being totally backwards - once I had the layout done, the functionality was ready in minutes. But the layout took almost a whole day... And this is not my first time spending ages to get a formpanel working. The basic form functionality of it is a cinch - never an issue. But laying things out in these panels somehow is always such a long bout of trial and error and bad hacks.

Just a suggestion, love all your work, obviously I wouldn't be spending hours trying to get a FormPanel to work if the rest of the framework wasn't worth it! Maybe, just maybe though, since so many forms are tabular in nature, it would make sense to have the FormLayout subclass TableLayout instead? I mean I don't know all the particulars of the internals, and I know you probably chose AnchorLayout for a reason, but it just doesn't seem natural to me. Like I said though too, maybe AnchorLayout is best, and we just need more documentation on how that works?

jack.slocum
27 May 2008, 2:49 PM
I think it could be a lack of understanding for how the layouts work. What you are describing sounds pretty easy to set up. Do you have a screenshot?

fbloggs
27 May 2008, 3:56 PM
I've seen the anchor property used on forms, but I can't find any documentation for it. I've searched the API manual and the web, but to no avail. Please help. For example, what does this mean:


anchor: '100% -35' // anchor width by percentage and height by raw adjustment

danh2000
27 May 2008, 6:35 PM
I've seen the anchor property used on forms, but I can't find any documentation for it. I've searched the API manual and the web, but to no avail. Please help. For example, what does this mean:


anchor: '100% -35' // anchor width by percentage and height by raw adjustment

It's documented under the AnchorLayout here:

http://extjs.com/deploy/dev/docs/?class=Ext.layout.AnchorLayout

There are also a few examples, eg. see here:

http://extjs.com/deploy/dev/examples/form/anchoring.html

fbloggs
27 May 2008, 8:58 PM
Thanks very much for your help. Your link to the doc does explain it, although it would be nice if the anchor config property was documented like other config properties.

Animal
28 May 2008, 5:57 AM
How could it be?

It is not a native config property of anything.

fbloggs
28 May 2008, 7:05 AM
Ok. I obviously don't understand how everything hangs together yet. But my point is that 'anchor' should be searchable from the main tab ni the API documentation, like other properties/objects/methods. If it is not 'native' to anything, it must be part of some other classification, no?

Animal
28 May 2008, 8:14 AM
It is applicable to a child item of a Container that is using the AnchorLayout manager (or a subclass of it)

fbloggs
28 May 2008, 9:12 AM
Ok. I wonder who should be notified that it should be searchable in the documentation?

Also- I have another question on textarea objects ,but I'll post that separately. Thanks again for your help.