CODEWITHSUNDEEP
javascriptextjs
Abdel Raoof Olakara
Abdel Raoof Olakara

Reputation: 19353

working with CardLayout and FormPanels

I am trying to implement a wizard and I am using the CardLayout. The wizard has 3 screens with some form elements. So, basically I need to have a form that is split into 3 screens and user moves from one screen to next only if the data entered is valid.

The trouble is, How do I represent the form? I will need all the data to be submit when the user finally completes the wizard. I tried these two methods:

  1. Use card layout on a form panel. In this case, the form elements are not rendered properly.

  2. Use form panel for each screen in card layout panel. In this can the forms get rendered and the UI functionality is good. But how do I send the data spread over three forms to one post method?

So, what do I do? Ideas and suggestions please...

Upvotes: 0

Views: 1137

Answers (2)

ChrisR
ChrisR

Reputation: 14467

Considering the option with a Ext.form.FormPanel in each item of the CardLayout you could prevent submitting each of those forms and in the last one attach a listener to the "submit" button that loops over the items in your CardLayout panel and gets all form values by calling the getFieldValues() method of BasicForm on each.

var formValues = {};

CardLayoutPanel.items.each(function(panel){
    if (panel.isXType('form')) {
        Ext.apply(formValues, panel.getForm().getFieldValues());
    }
});

// Now you can dispatch an ajax request with Ext.Ajax that sends the
// formValues variable as parameters to your backend to process
// all values from the three forms.

Upvotes: 0

JamesHalsall
JamesHalsall

Reputation: 13495

Option number 1 is the best solution, in fact I wouldn't even consider number 2 because it's not very scalable.

I am assuming that by "the form elements are not rendered properly" you are missing your form layout in each card.

items: [{
    id: 'card-0',
    layout: 'form',
    items: [{
        //items here
    }]
},{
    //other cards
}]

Upvotes: 1

Related Questions