Blog

Ext.ux.Wiz – a wizard-component for Ext JS

Ext.ux.Wiz - a wizard-component for Ext JS

Subproject blowout! I was able to release my wizard-component earlier than I thought – possible due to my employer Refined Labs GmbH .

Similiar to the livegrid- and youtubeplayer-extension released earlier, this component grew as a sub-project out of the larger application I’m currently working on.

Since I wasn’t pleased with the solutions already floating around in userland, I created my own wizard-component for Ext JS. Target: Simplify setup processes and the collecting of data where a guide is useful; keep the implementation process as simple as possible, but flexible enough to allow for complex instances (this goes specially for validating user input and therefor resulting component behavior).

The component consists of three classes:

Ext.ux.Wiz (deriving from Ext.Window): The base class for a wizard component. A window that holds paging-buttons (previous/next step) and a button for canceling the wizard. Flexible event-listener behavior guarantees complex wizard workflows. Paging-buttons will be enabled/disabled based on the validator-rules found in the current active card (type: Ext.ux.Wiz.Card).

Ext.ux.Wiz.Header (deriving from Ext.BoxComponent): A component that can be used as a header/footer/whatever to indicate the progress in the wizard. Also shows information about the wizard’s purpose, as configured.

Ext.ux.Wiz.Card (deriving from Ext.FormPanel): Each card represents a step in the setup-process and holds either form-elements which are validated automatically (monitorValid:true) or plain informations about the progress in the wizard so far, or both. An array of instances of Ext.ux.Wiz.Card will be passed to Ext.ux.Wiz to automatically build and layout the wizard.

Go grab it while it’s hot: http://www.siteartwork.de/wizardcomponent

Note:
Ex.ux.Wiz depends on a custom implementation of Ext.layout.CardLayout. You can find it here.

Discussion

6 Comments
0 Trackbacks

Roy December 3, 2008

How do I get the code? I tried google code but I’m not fimular with SVN and could make it work. Is there another link?
(reply)
Victor Smirnov March 22, 2009

Hello, Thorsten!

It seems like I found a bug/strange behaviour in this wizard. I use Wizard with ExtJs 2.2, but I reproduces it with 2.1 too.

This can be easily reproduced with SimpleWizard.html. You need to comment (or remove) lines 61-70.
So the first card panel in the wizard will have monitorValid == true. You will never leave the first page (next button fails).

I tried to track down this issue. When I open wizard window method “onCardHide” (class Card) is called for hidden cards and method “onCardShow” is not called for the first shown card. So we don’t start monitoring and bound field for this card is false. So isValid returns false (line 294 from file Wizard.js).

I’m not sure why show event is not fired for the first show card panel.

Have you faced this problem? Do you have any ideas?

Thanks, Victor
(reply)
Pedro October 1, 2009

Hello, Thorsten.
Fist of all I want to thanks for the great job that you’ve done in this wizard. But the problem is that I’m a Cuban citizen, and as a good one google doesn’t allow my country access to some of their services, like googlecode, if there is any other link to download the wizard i’ll appreciate you let me know.
Greetings from Cuba.
(reply)
Joshua November 23, 2009

Hi! i want to be able to use the getWizardData() function
bt i can have anything on it to read. Can u please help me on that?
(reply)
Carlos Luiz April 1, 2010

Victor Smirnov,

I’m facing the same problem as yours, have you got any solution?

Thanks.
(reply)
Raluca November 24, 2010

Hi Victor,

I have the same problem. Did you get any answer, or did you find any solution until now?

Thanks,
Raluca
(reply)