[2.2] ux.WizardPanel - my take on wizards

[KampfCaspar]

In this very forum, there were different wizard extensions. Those didn't meet my prerequisites, though. This proposal does:

Concentrate control in the main class;
Concentrate on wizardness;
Definable control buttons, disabled/hidden per card and per validity;
Definable workflow (subset of cards)
Hierarchical organisation of the cards


Demo: http://saintcyr.oeri.ch/bzr/sites/ext-ux/V0_3/examples/SimpleWizard.html
Home: http://saintcyr.oeri.ch/trac/ext-ux/

EDIT 2008-10-11: Version 0.3: Jump several levels down
As a further update, the attached V0_3 allows to "jump" several levels down with one card. Add a config levelOverride as array of the new titles of the "higher" cards. This is equivalent to obliviate the necessity of the first card shown in the thumbnail of 0.2.
/EDIT

EDIT 2008-10-09: Version 0.2: Hierarchical Overview

I updated my WizardPanel to allow hierarchical overviews - handy for long processes. To build the tree, an element 'level' of the cards is used; level 0 is the wizard itself, level 1 (default) the highest cards that can contain level 2 etc. Find attached a picture of three consecutive pages showing the information pane.
/EDIT

While my work derivates from Mindpatterns' (http://extjs.com/forum/showthread.php?t=36627) I couldn't stop messing around too much (and learning a lot about ext).

I'm open for suggestions, of course.

KampfCaspar

[SamuraiJack1]

IMHO you should consider to patch Ext.ux.Wiz (in cooperation with its author) instead of forking . This way the world will receive one significantly better Wizard component, instead of 2 more-or-less-good.

[KampfCaspar]

As I tried to describe, my solution deviates too much and in incompatible ways. The very base concept is different.

I'm no fan of forking, but in an early stage, different concepts sometimes coexist.

[razor]

Nice work, I have been working on the wizard of mindpatterns a lot too. However I think an quick glance of your fork is working out pretty good.

Please post an extended example where you change the flow of the wizard by setting the subset of cards, or changing the array of cards.

Thank you.

Your domain does not work btw.

[jay@moduscreate.com]

1) you're site is not configured for https!
2) Your demo link is bad

[KampfCaspar]

1) you're site is not configured for https!
2) Your demo link is bad

Sorry, it is configured and the link works. The server uses a CACert certificate which might not be recognised by your browser (but the connection works fine).

As I'm developing on FF only (no windows here), the code is currently not tested elsewhere.

[jay@moduscreate.com]

Sorry, it is configured and the link works. The server uses a CACert certificate which might not be recognised by your browser (but the connection works fine).

As I'm developing on FF only (no windows here), the code is currently not tested elsewhere.

Don't underestimate me ;).

[KampfCaspar]

OK, for all those that use browsers without a cacert.org root, I reconfigured my devel server to allow http alongside https.

I will change the first post accordingly.

@jgarcia: You could add the cacert.org root or add an exception.

[KampfCaspar]

I added a new version in the first post.

[KampfCaspar]

New version 0.3


45 Hans-Peter Oeri 2008-10-11
reformat

44 Hans-Peter Oeri 2008-10-11
added levelOverride

43 Hans-Peter Oeri 2008-10-11
reformat

42 Hans-Peter Oeri 2008-10-11
reformat

41 Hans-Peter Oeri 2008-10-11
reformat

40 Hans-Peter Oeri 2008-10-11
fix getData exception in case of uninstantiated cards

39 Hans-Peter Oeri 2008-10-09
reformat and comments

[razor]

I like the revision 0.3, sublevels are a good thought!

Currently I am working with the earlier posted wizard from MindPatterns. What I am trying to accomplish is to have some sort of dynamic card flow.

After receiving an user input, the input is checked in the database, and the next cards are changed/loaded dynamicly.

Would that be possilble with your extension? Might you be able to work up an example (without db of course, just a proof of concept).

[sirioz10]

Line:257

this.setCards( this.cardsPanel.items.items.splice(0), this.activeIndex );

splice (http://www.w3schools.com/jsref/jsref_splice.asp)method require two parameters.

this error is ingored by FF but cause an error in IE.

I don't understand the use of splice in this context, but if I remove it:

this.setCards( this.cardsPanel.items.items, this.activeIndex );

all seems to work fine.

P.S.
Can you provide an example of how Hierarchical wizard work?