[2.1] Ext.ux.Wiz - a wizard-component for Ext JS

[ThorstenSuckow]

Edit: 31.05.2009
Changelog

• fixed: dialog would be closable even if teh dialog state would be set to "disabled"; added "beforeclose"-listener to prevent closing the dialog in case the dialog is busy
• fixed: loadmask-msg would not be rendered due to accessing an object property quoted
• fixed: typo in Header.js (closes google issue #1)
• enhancement: converted tabs to spaces

Edit: 07.05.2009
Changelog

• enhancement: Updated component to work with Ext JS 3.0 while keeping backwards compatibility to Ext 2.*

Edit: 31.05.2008
Changelog

• fixed: wrong regex-mask in examples/SimpleWizard.html allowed for wrong user-input data
• enhancement: removed initListeners implementation to initEvents-override in Ext.ux.Wiz
• fixed: added 'beforecardhide'-event to Ext.ux.Wiz.Card since some listeners for the beforehide-event could block hiding the card when CardLayout requests it after rendering
• fixed: changed default hideMode in Ext.ux.Wiz.Card to 'display' to prevent rendering issues with IE7 due to the latest changes

Edit: 28.05.2008
Changelog

• fixed: IE6 did not render the step-indicator images as expected, added style-rule in ext-ux-wiz.css (thanks to donssmith)
• fixed: IE6 complained about multiple OR conditions in Ext.ux.Wiz.initComponent

Edit: 26.05.2008
Changelog

• fixed: IE complained about semicolon in examples/SimpleWizard.html
• fixed: removed "!important"-style-override in examples/SimpleWizard.html since IE doesn't like it
• fixed: quoted "default" in Ext.ux.Wiz.loadMaskConfig since it's a keyword in IE

----

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.


Blog entry: http://www.siteartwork.de/2008/05/26...nt-for-ext-js/
Project-home: http://www.siteartwork.de/wizardcomponent

[jay@moduscreate.com]

that's sharp

[mystix]

+1 million

never realised you had all these hosted on googlecode

[donssmith]

Very well done!

I added background-repeat: repeat-x;

.ext-ux-wiz-Header-stepIndicator {
    margin-left:28px;
    float:left;
    background-image:url(../images/ext-ux-wiz-stepIndicator.png) !important;
    background-position:6px 0px;
    background-repeat: repeat-x; 
    height:6px;
    width:6px;
} 

for the step indicator image to work correctly in IE6.

[Animal]

Impressive as ever! Nice implementation.

[gelleneu]

Sounds good, but I can't find the download (google code download is empty) and/or some Live Demos?

[sigaref]

Sounds good, but I can't find the download (google code download is empty) and/or some Live Demos?

You have to checkout the code from the Google Code SVN.

svn checkout http://ext-ux-wiz.googlecode.com/svn/trunk/ ext-ux-wiz-read-only

[ajaxvador]

nice and nice

[ThorstenSuckow]

Thanks for the feedback so far!

I added background-repeat: repeat-x;

.ext-ux-wiz-Header-stepIndicator {
    margin-left:28px;
    float:left;
    background-image:url(../images/ext-ux-wiz-stepIndicator.png) !important;
    background-position:6px 0px;
    background-repeat: repeat-x; 
    height:6px;
    width:6px;
} 

for the step indicator image to work correctly in IE6.

I've added this fix, along with another bug-fix related to IE6. Latest version can be checked out from the trunk.

[wm003]

Very well done as always! Thank you very much for sharing!