Wizard style UI using a card layout

The Wizard style UI is perfect when you need to lead the user through a series of steps in a specific sequence. Wizards are especially suited for complex or infrequently performed tasks, where the user is unfamiliar with the steps involved. In the following screenshot, you'll see what the Wizard style UI built in this recipe looks like:

How to do it...

1. 1. Create the wizard's cards or steps:

   card0=new Ext.Panel({
   id: 'card-0',
   html: '<h1>Step 1 of 3</h1><p>Welcome to the wizard. </p><p>Click the "Next" button to continue...</p>'
   });
   card1=new Ext.Panel({
   id: 'card-1',
   html: '<h1>Step 2 of 3</h1><p>One more step left.</p><p>Please click the "Next" button to continue...</p>'
   });
   card2=new Ext.Panel({
   id: 'card-2',
   html: '<h1>Step 3 of 3</h1><p>This is the last step. You made it!</p>'
   });
   

2. 2. You need a function to switch the steps:

   var navigationHandler=function...