PDA

View Full Version : Form with next previous buttons?



fredrik.stockel
2 May 2007, 2:01 AM
Hi,

I'm trying to create a form built up by "sections" where only one section is displayed at the moment (questionnaire style, with previuos and next buttons), but I can't really figure out how to accomplish this using Ext.form? anyone tried to create something similar?



- Fredrik

Darklight
2 May 2007, 2:24 AM
you could use tabs, then you also have a built-in "history" on top ;D

fredrik.stockel
2 May 2007, 4:41 AM
I'll give it a try, thanks. I guess I have to render it from exisitng markup (the form) and use BasicForm instead of Form if I want to take advatage of the ext fieldtypes?

I was originally trying to render the form with pure js but got stuck when trying to create sections (surrounding divs) for each part of the form.

jay@moduscreate.com
2 May 2007, 5:22 AM
rodrigo (or what ever his name is) built a "Wizard" like function for this exact same thing. he uses tabs. check out the examples section.

TopKatz
2 May 2007, 6:09 AM
If your set on doing it this way, then how about this:

Build a different form for each page that you want to forward. Then you need to wipe out the innerHTML for the last form, and call the new one. Each form can point to the same container div, just don't build it until you hit the forward button, then process the current one, wipe it out, and build the new one.

ie:

formPageOne()

formPageTwo()

etc... then just call the apropriate form based on the paging action.

TopKatz
2 May 2007, 6:22 AM
BTW - I do something like this techniques one of my forms. I have some dynamic checboxs on the form. So a user can add new ones after the form is rendered. As far as I know you cant re-render the form, so I just destroy it, then rebuild it after a new checkbox is added.

This is simaler to what you could do, except call a different form build function all together.

zarickj
4 May 2007, 4:54 AM
I implemented a simple solution based on the BorderLayout class which flips through an array of ContentPanels:

It is nothing fancy, the only issue I had with it was radio buttons groups being reset in IE when you go next or back.

Example:
http://dev.zarick.net/radio_issue.html

The code is also posted on my radio button issue thread:
http://www.extjs.com/forum/showthread.php?t=5395