From Learn About the Ext JavaScript Library

Contents 1 Description 2 Documention 3 Todo 4 Usage 5 Changelog 6 Potential Problems 7 Screenshots

Description

A multi-page wizard component is derived from Ext.BasicDialog, but it makes use of a dialog template with Back, Next, Cancel, and Finish buttons, to create simple generic wizard skeletons. Any of your dialog resource can be filled in custom wizard.

See the demo for the latest source or direct download JS Source here.

---

New: compatible version for Ext 2.x, see the forum post for codes:

Documention

1.Ext.ux.wizard( String/HTMLElement/Ext.Element el, Object config ):Wizard
Create a new Wizard.
Parameters:
el:String/HTMLElement/Ext.Element
The holder element
config:Object
The config object the same as Ext.BasicDialog.

2.addStepContent(Object config):void
Add steps to dialog body.
Parameters:
An object containing configuration properties for a step. This may contain any of the following properties:
title:String
The title of step(be set to Ext.dialog.title)
goNextConfirm:Boolean
Optional. True if showing a confirm dialog to ask the user before go Next Step.
goPerviousConfirm:Boolean
Optional. True if showing a confirm dialog to ask the user before go Previous Step.
autoResetForm:Boolean
Optional. True if reseting form after go Next/Previous Step.
fn:Function
Function to add step's content.

Todo

1.Events from each button (onprevious, onnext, etc.), events can be canceled;

2.Show a list with wizard steps with current one highlighted;

3.lazy render steps (load on demand)

Usage

App={}
App.AppName = "Wizard DEMO";
/**
 * create a singleton 'CreateProject' as a wapper.
 */
CreateProject = function(){
	var wizard;
 	return {
		init:function(){
			wizard = new Ext.ux.wizard(Ext.id(),{
				autoCreate:true,
				width:630,
				height:380,
				resizable:false,
				autoScroll:false
			});
			//add steps to dialog body respectively
			wizard.addStepContent({
				title:App.AppName+' Wizard:'+'Welcome',
				goNextConfirm:false,
				goPerviousConfirm:false,
				/**
				 * typeof 'fn' should be 'function' that used to build steps.
				 * Building from MakeUp will be there in next update
				 */
				fn:this.welcomePage
			});
			wizard.addStepContent({
				title:App.AppName+' Wizard:'+'Please input project\'s info',
				goNextConfirm:true,
				goPerviousConfirm:true,
				autoResetForm:true,
				fn:this.newProjectForm
			});
			wizard.addStepContent({
				title:App.AppName+' Wizard:'+'Finish',
				fn:this.finish
			});
		},
		show:function(btn,e){wizard.show(/*btn.ui.wrap*/)},
		welcomePage:function(){
//			this-->the instance of wizard
/**
* You can have 100% controll on Dialog here,such as buttons,close action...
*/
			var dlg = this.dlg;
			/**
			 * this.container must be appeared in every Setp.fn
			 */
			this.container = dlg.body.createChild({
				tag:'div',
				cls:'wizard_container',
				children:[
					{tag:'br'},
					{
						tag:'h3',cls:'wizard',
						html:'Start out config your project'
					},
					{
						tag:'div',
						cls:'wizard_intro',
						html:'Project Tracker provides innovate infrastructure of bug/defect tracking software solution that deliver not  for professional developer,but also public tester in a easy-to-learn/use User Interface. '
					}
				]
			});
		},
		newProjectForm:function(){
//			this-->the instance of wizard
			var dlg = this.dlg;
			var formEl = this.container;
			this.container = dlg.body.createChild({
				tag:'div',
				cls:'wizard_container'
			});
			var formEl = this.container.createChild({
				tag:'form',
				id:'wizard_newProjectForm',
				children:[
					{
						tag:'fieldset',
						style:'border:1px solid #818181;height:203px;padding:8px;padding-top:0;',
						children:[
							{
								tag:'legend',
								cls:'',
								html:"<b>User Basic Information</b>"
							},
							{tag:'br'},
							{
								tag:'div',
								children:[{
									tag:'span',
									style:'width:80px;display:block;float:left;',
									html:"Project Name:"
								},
								{
									tag:'input',
									name:'title',
									cls:'x-form-text x-form-field',
									type:'text',
									size:25
								},{tag:'span',html:'&nbsp;*'},
								{tag:'br'},
								{tag:'br'},
								{
									tag:'span',
									style:'width:80px;display:block;float:left;',
									html:"Project Details:"
								},
								{
									tag:'textarea',
									name:'project_Details',
									cls:'x-form-field',
									style:'height:90px;width:50%;overflow-x:hidden;',
									width:100
								},{tag:'span',html:'&nbsp;*'},
								{tag:'br'},
								{tag:'br'},
								{
									tag:'span',
									style:'width:80px;display:block;float:left;',
									html:"Founder:"
								},
								{
									tag:'input',
									name:'founder',
									cls:'x-form-text x-form-field',
									type:'text',
									size:15
								},{
									tag:'span',html:'&nbsp;*&nbsp;'
								},{
									tag:'button',html:'Users...'
								}]
							}
						]
					},
					{tag:'br'},
					{
						tag:'input',
						type:'submit',
						value:'Create My Account'
					}
				]
			});
			formEl.on('submit',function(e,formDOM){
				e.stopEvent();//cancel browser action
			    Ext.Ajax.request({
					url:'/deepcms/user/Server/Submitter.asp',
					method:'post',
					params:'do=createNewUser'+
							'&'+Ext.Ajax.serializeForm(formDOM),
					success:commonFn.XHR_Response_Handler.ok,
					failure:commonFn.XHR_Response_Handler.failure
			    });
				nextBtn.enable();
			});
			//get Focus
			formEl.child('input[name="title"]').focus();
		},
		finish:function(){
//			this-->the instance of wizard
			var dlg = this.dlg;
			this.container = dlg.body.createChild({tag:'div'});
			this.container.createChild({
				tag:'img',
				cls:'left',
				vspace:1,
				hspace:1,
				src:'/deepcms/resources/tracker/setup_2.jpg'
			});
			this.container.createChild({
				tag:'div',
				cls:'left',
				style:'margin-top:25%;width:60%;text-indent:10em',
				children:[
					{
						tag:'h3',
						html:'Finish!'
					}
				]
			});
		}
	};
}();
	Ext.onReady(function(){
//		singleton CreateProject as a wapper
		CreateProject.init();
		CreateProject.show();
	})

Changelog

v0.1 Frank's initial design
For 2.x compatible version for Ext 2.x

Potential Problems

1. Created by makeup(Coming Soon).
2. Works under Ext 1.1.1, other back versions not test.

Screenshots