ExtJS 4 MVC: Using Card Layout for Wizard based Registration

Card layout manages multiple child container where only a single child container can be visible at any given point of time. This layout style is most commonly used for wizards, tab implementations, etc. To make your Container support card layout use layout: ‘card’.

The most important method in CardLayout is setActiveItem. Since only one panel is displayed at a time, the only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display (or its id or index). The layout itself does not provide a user interface for handling this navigation, so that functionality must be provided by the developer.

Today i am demonstrating How we can leverage the Card Layout to create a Wizard-based User Registration form. I have used ExtJS v4+ with MVC.

First, create two forms which will work as a child container.

Second child form, AddressForm

Now create a Final child panel, which will show a message if Registration successful.

We need a main container which act as a parent container and has a card layout associated to it.

Now its time to create a WizardController.

And we need a app.js file to initialize the app.

Last, a HTML page which include all this js files.

The output will look similar to below….

Download Source (size: ~ 4bk)

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 TechZoo - Technology Blog. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions