PDA

View Full Version : [2.x] Ext.ux.PowerWizard 0.1



mdm-adph
27 Mar 2008, 12:45 PM
Hey, everybody! I noticed there wasn't a wizard plugin, so I decided to upload something I had been working on.

It's my first plugin, and I welcome any constructive criticism you have. It's very simple, without a lot of bells and whistles, but I'd love to know if anyone could find it useful.

(About the name -- it was a tossup between this and "EasyWizard," and "PowerWizard" won the coin toss. :D )

Online Demo: http://mdm-adph.freehostia.com/Ext.ux.PowerWizard/PowerWizardTest.html

(Edit: I've included a quick screen shot, too, of the wizard contained within an Ext.Window -- as you can see, there's nothing to it.)

(Background Image "wizard-bg-keyboard-large.jpg" courtesy of user "maccomputer" on http://www.sxc.hu)

mdissel
27 Mar 2008, 12:58 PM
i get an error invalid attachment when downloading the zipfile..

mdm-adph
27 Mar 2008, 1:00 PM
Hmm -- try it again -- working fine over here. Maybe the server hiccuped?

mdissel
27 Mar 2008, 1:36 PM
Now it works..

jsakalos
27 Mar 2008, 7:37 PM
Looks interesting but I'd like to see it in action. Any online demo?

stumpy_uk
28 Mar 2008, 1:46 AM
Very good, I would like to see it integrated with a JSON or XML Data backend rather than lots of Xtypes so that it can be data driven, but excellent netherless...

Cheers

Stumpy

mdm-adph
28 Mar 2008, 4:57 AM
Looks interesting but I'd like to see it in action. Any online demo?

Well, it comes with an example HTML page in the zip file -- all you have to do is edit the code to point towards toward valid Ext libraries and it should work right away. :D

I'd love to put up an online demo, but I don't have any hosting for that type of thing -- know of any quick places where I could put up something like that?

galdaka
28 Mar 2008, 5:03 AM
Well, it comes with an example HTML page in the zip file -- all you have to do is edit the code to point towards toward valid Ext libraries and it should work right away. :D

I'd love to put up an online demo, but I don't have any hosting for that type of thing -- know of any quick places where I could put up something like that?

Web hosting: freehostia

Greetings,

mdm-adph
28 Mar 2008, 5:07 AM
Signing up for it right now!

mdm-adph
28 Mar 2008, 6:19 AM
Well, I signed up, and set about uploading the Ext libraries, but apparently Freehostia has a 500k limit on file size (I think) -- everything but Ext-all.js will upload (and stay on the server).

Either way, until I get an online demo, feel free to download the zip file and load up the HTML file that's contained within -- just remember to adjust the location of the ext libraries at the top of the file.

wm003
28 Mar 2008, 7:08 AM
Very nice! Thanks for sharing!

mdm-adph
28 Mar 2008, 7:14 AM
Thanks! Glad it works for you!

If someone could provide a link to their Ext libraries, I could put up an online demo... ;)

Is it uncouth to link to the ones here on the main site?

mdm-adph
28 Mar 2008, 8:01 AM
Got a demo up! Through a bit of fiddling with files on freehostia's servers, the libraries can now be loaded.

JorisA
29 Mar 2008, 5:05 AM
Looks great. One thing I would like to see is a bar on the left that shows the progress like:

1. Personal information.
2. Other stuff.
3. Confirmation

mdm-adph
31 Mar 2008, 7:26 AM
Looks great. One thing I would like to see is a bar on the left that shows the progress like:

1. Personal information.
2. Other stuff.
3. Confirmation

A progress bar for the whole thing is a great idea. I was also working on a function that would auto-build an XTemplate which would show the progress in that fashion, but I've since been distracted with other stuff! I hope to revisit this soon, but in the meantime, if anyone wants to expand upon my code, feel free.

dotnetCarpenter
14 Apr 2008, 8:15 PM
One quick thing I notice is that the background image is set inside the PowerWizard component. I don't think that's a good idea to have that as a default value but maybe that's just me.

Is it understood correct that the PowerWizard component doesn't have any visuals hence you put in an Ext.Window? Maybe you should inherite from Ext.Window - you can still overwrite the FormPanels isAllValid.

dotnetCarpenter
14 Apr 2008, 8:25 PM
Also, you have in line css which is bad for end-developers (like me ;)) It's much better to use CSS classes and add a CSS file to your component. That way you can define a default look and feel while letting the end-developer overwrite the default styles.

Hope I'm not stepping on your toes.

mdm-adph
16 Apr 2008, 5:33 AM
Also, you have in line css which is bad for end-developers (like me ;)) It's much better to use CSS classes and add a CSS file to your component. That way you can define a default look and feel while letting the end-developer overwrite the default styles.

Hope I'm not stepping on your toes.

Yes, you're stepping all over my toes and I'm being very offended right now... just kidding. :P

All valid points. About the inline CSS and harcoded bg image: really, I should have called this "QuickWizard," but "PowerWizard" sounded better. I guess it's more like a proof of concept that I put up here because nobody else had even submitted a Wizard ux! The hardcoded stuff'll definitely come out in later editions.

And I could inherit from Ext.Window and make it part of that, and while it looks good, it was really just an example -- for example, in an application I made that I use this in, the PowerWizard is actually just inside another cardlayout; having it in another window wouldn't have meshed with the way the rest of the app worked.

But having the option to display it in a window is a good idea, definitely.

lupin85.luca
17 Apr 2008, 12:57 AM
Congratulations: nice extension, really!

Is it possible to add a file upload item? If so ... how? :-/

I've tried to insert this item after "opt02":


{
fieldLabel: 'Upload file',
name: 'opt03',
inputType: 'file',
xtype:'textfield',
allowBlank:true
}
but when I submit the form, the .getValues() method doesn't return the "opt03" element. So I kindly ask you: why??? Analyzing the source code, it seems that my new item isn't of xType: "form", but I'm not sure.

mdm-adph
17 Apr 2008, 5:41 AM
Congratulations: nice extension, really!

Is it possible to add a file upload item? If so ... how? :-/

I've tried to insert this item after "opt02":


{
fieldLabel: 'Upload file',
name: 'opt03',
inputType: 'file',
xtype:'textfield',
allowBlank:true
}
but when I submit the form, the .getValues() method doesn't return the "opt03" element. So I kindly ask you: why??? Analyzing the source code, it seems that my new item isn't of xType: "form", but I'm not sure.

Theoretically, it should be okay to use a file upload item (I must admit, I've never worked with Ext's file upload item!).

Typically -- and thank you for pointing out the fact that I forgot to document this -- I intended new cards to be added to the PowerWizard config in this format: "card config > fieldset config > individual item configs".

For example, your item would be configured like this and added after "card-2":


{
id: "card-3",
items: {
id: "card-3-fieldset-1",
title: "Upload a file?",
items: [{
fieldLabel: 'Upload file',
name: 'opt03',
inputType: 'file',
xtype: 'textfield',
allowBlank: true
}]
}
}Make sure and change the id of the last card to a higher number, too (it would be "card-4" in the example).

But, that aside, I tried and even if you enter something into the file upload control, nothing is grabbed by the final "PowerWizard.getValues()" at the end -- I've stepped through the code, and for some reason when it gets to the form with just the file upload item in it, nothing is returned by that individual form's .getValues().

Just to try something, I changed the inputType to "password," just to see if I could get a value, and that worked -- is there any reason why just a file upload item wouldn't be returning a value when it's inside a form and that form's .getValues() is called?

I could create a custom function that would scour a form for file upload items and grab their values directly to add to PowerWizard's final getValues() data, but I'd like to see if there was an easier way, first!

WyriHaximus
29 Jun 2008, 10:40 AM
hey is it possible to go to the next page with a function call? Been trying it myself but failing utterly.

ray007
30 Jun 2008, 1:59 AM
How does it compare to http://extjs.com/forum/showthread.php?t=36627 ?

mdm-adph
30 Jun 2008, 8:52 AM
hey is it possible to go to the next page with a function call? Been trying it myself but failing utterly.

Don't think it'd be too hard -- just a matter of grabbing a reference to the private "_METH_setActiveCard()" method. A quick fix is to add:


this.setActiveCard = _METH_setActiveCard;at the end of the "Ext.ux.PowerWizard = function (CFG) {" block, and then just call it externally using whatever variable you assigned that particular PowerWizard object to.


How does it compare to http://extjs.com/forum/showthread.php?t=36627 ?

Well, try 'em both and tell us. ;)

WyriHaximus
30 Jun 2008, 12:13 PM
Don't think it'd be too hard -- just a matter of grabbing a reference to the private "_METH_setActiveCard()" method. A quick fix is to add:


this.setActiveCard = _METH_setActiveCard;at the end of the "Ext.ux.PowerWizard = function (CFG) {" block, and then just call it externally using whatever variable you assigned that particular PowerWizard object to.



Well, try 'em both and tell us. ;)
Awsome that worked :D! Still learning more JS day by day :D!

mdm-adph
2 Jul 2008, 7:05 AM
Awsome that worked :D! Still learning more JS day by day :D!

Glad that it worked! Feel free to make any other modifications to the code you want -- improve all you want.

rnfbr1
25 Jan 2009, 5:02 AM
Hi , great component but i need to place a grid in one of the cards, is it possible to do that??
if so ,how???

Thanks and keep up the good work

gnadirap
4 May 2010, 10:59 PM
Hi all..

I've placed a grid in one of my panels.. now it's needed, that one element in the grid is selected. so i use the getSelecteionModel to get the ID of the Element in the grid.

The problem now is, that i can click on next, but no element is selected. how can i do such selection?

greetings and many thanks

gnadirap