1. #1
    Sencha User Frank's Avatar
    Join Date
    Mar 2007
    Posts
    185
    Vote Rating
    1
    Frank is an unknown quantity at this point

      0  

    Default Ext.ux.wizard for Extjs 1.x

    Ext.ux.wizard for Extjs 1.x


    Since last time a try of wizard,which was a prototype for my practice, and now I want to make a real use one.
    Details on Wiki Page:
    http://extjs.com/learn/Extension:Wizard_for_Extjs_1.x

    Wizard 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.






    Any and all ideas are welcome,thanks in advance!

  2. #2
    Ext User DigitalSkyline's Avatar
    Join Date
    Apr 2007
    Location
    Rochester, MI
    Posts
    461
    Vote Rating
    1
    DigitalSkyline is on a distinguished road

      0  

    Default


    Very nice... I need to do something like this for my billing system (wizard for creating invoices from quotes/projects) - thanks for the good looking example and code!

  3. #3
    Sencha User Frank's Avatar
    Join Date
    Mar 2007
    Posts
    185
    Vote Rating
    1
    Frank is an unknown quantity at this point

      0  

    Default


    New Version released and posted on wiki page.
    http://extjs.com/learn/Extension:Wizard_for_Extjs_1.x

    -------------
    New:
    compatible version for Ext 2.x, code below:

    Code:
    /**
     * @class Ext.ux.wizard
     * @extends Ext.Window
     * @url http://extjs.com/learn/Extension:Wizard_for_Extjs_1.x
     * In Ext2.0, Although you can extend a built-in card layout into a wizard component should be pretty easy,
     * here's another implemention of my own, which is upgarded from the version runs well at 1.x.
     * @param {Object} config The config object the same as Ext.Window.
     */
    Ext.ux.wizard = function(config){
    	var _config = Ext.apply({
    		renderTo : Ext.getBody(),
    		buttons  : [
    			{text:'Pervious', handler: this.movePervious, scope: this, hidden:true},
    			{text:'Next', handler: this.moveNext, scope: this},
    			{text:'Finish', handler: this.finisHanlder, scope: this, hidden:true},
    			{text:'Cancel', handler: this.hideHanlder, scope: this}
    		]
    	}, config||{});
    
    	this.id = 0;
    
    	this.stepPages = [];
    	this.loaded_Page_No;
    	this.loaded_Page;
    
    	Ext.ux.wizard.superclass.constructor.call(this, _config);
    	this.render();
    
    	this.on('show',function(){
    		if(!this.loaded_Page_No){
    			this.move(1);//first one
    		}
    	},this);
    	this.dlg = this;
    };
    Ext.extend(Ext.ux.wizard , Ext.Window, {
    	/**
    	 * Add steps' content to dialog body.
    	 * @param {Object} config
    	 * An object containing configuration properties for a step.
    	 * This may contain any of the following properties:
    	 * @cfg {String} title The title of step(be set to Ext.dialog.title)
    	 * @cfg {Boolean} goNextConfirm Optional. True if showing a confirm dialog to ask the user before go Next Step.
    	 * @cfg {Boolean} goPerviousConfirm Optional. True if showing a confirm dialog to ask the user before go Previous Step.
    	 * @cfg {Boolean} autoResetForm Optional. True if reseting form after go Next/Previous Step.
    	 * @cfg {Functionfn} The function to add step's content.
    	 */
    	addStepContent:function(step){
    //		just names it for a mention that this is 'Class'.
    		var Class_Page = step.fn;
    		if(typeof Class_Page != 'function')throw 'argments must be a function.';
    //		assign the prototype with id++ for every fn
    		Class_Page.prototype = {
    			id:this.id++,
    			title:step.title||'Step:'+(this.id++),
    			goNextConfirm:!!(step.goNextConfirm),
    			goPerviousConfirm:!!(step.goPerviousConfirm),
    			autoResetForm:!!(step.autoResetForm),
    			dlg:this.dlg,
    			container:null,
    
    			getDIV:function(){
    //				this-->instance
    				return this.container;
    			},
    			notiflyDlg:function(moveDirection){
    				return moveDirection=='>'?this.goNextConfirm:this.goPerviousConfirm;
    			}
    		};
    		var incomingPage = new Class_Page();
    		var StepPanel = incomingPage.getDIV();
    		if( StepPanel){
    			StepPanel.setStyle('display','none');
    		}
    		this.stepPages.push(incomingPage);
    	},
    	/**
    	 * @private
    	 */
    	move:function(pageNo){
    		if( this.loaded_Page && (pageNo!=0) ){
    			this.loaded_Page.applyStyles('display:none');
    		}
    
    //		获取每个页面的实例 get a instance for every page
    		var pageInstance = this.stepPages[(pageNo-1)];
    		var step = pageInstance.getDIV();//always less one than the length of index
    		step.show();
    		this.dlg.setTitle(pageInstance.title);
    //		auotResetForm check out
    		if(pageInstance.autoResetForm){
    			step.child('form').dom.reset();
    		}
    		this.loaded_Page = step;
    		this.loaded_Page_No = pageNo;
    	},
    	/**
    	 * @private
    	 */
    	moveNext:function(btn,e){
    		var body = this.dlg.body;
    //		goNextConfirm? true if showing a confirm dialog to ask the user
    		var pageInstance = this.stepPages[this.loaded_Page_No-1];//pervious page!
    		if( pageInstance && pageInstance.notiflyDlg('>')){
    			if(!window.confirm('Do you want to go Next Page?'))
    				return;
    		};
    		this.move(this.loaded_Page_No+1);
    
    		var isLastPage = (this.loaded_Page_No)==(this.stepPages.length);
    		if(this.dlg.buttons[0].disabled&&!isLastPage){
    			this.dlg.buttons[2].hide();
    			this.dlg.buttons[0].enable(); //'pervious button'
    		}
    		if(isLastPage){//arrives at last page
    			btn.disable();
    			this.dlg.buttons[2].show();//'finish' button
    			this.dlg.buttons[3].hide();
    		}
    		if(this.loaded_Page_No > 0){//first one
    			this.dlg.buttons[0].show();
    		}
    	},
    	/**
    	 * @private
    	 */
    	movePervious:function(btn,e){
    		var body = this.dlg.body;
    //		goNextPervious?
    		var pageInstance = this.stepPages[this.loaded_Page_No-1];//pervious page!
    		if( pageInstance && pageInstance.notiflyDlg('<')){
    			if(!window.confirm('Do you want to go Pervious?'))
    				return;
    		};
    		this.move(this.loaded_Page_No-1);
    
    		var isNo1Page = ((this.loaded_Page_No)==1);
    		if(this.dlg.buttons[1].disabled&&!isNo1Page){
    			this.dlg.buttons[2].hide();
    			this.dlg.buttons[3].show();
    			this.dlg.buttons[1].enable();
    		}
    		if(isNo1Page){//arrives at pervious page
    			btn.disable();
    			this.dlg.buttons[0].hide();
    			this.dlg.buttons[1].enable();//'movefisrt' button
    		}
    	},
    	/**
    	 * @override
    	 */
    	hideHanlder :function(){
    		this.hide();
    	},
    	/**
    	 * @override
    	 */
    	finisHanlder:function(){}
    });

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    79
    Vote Rating
    0
    alexb is on a distinguished road

      0  

    Default


    The link to the 1.1 version no longer works. Could you repost it?

    Thanks

  5. #5
    Ext User daviscabral's Avatar
    Join Date
    May 2007
    Location
    Cascavel / PR / Brazil
    Posts
    45
    Vote Rating
    0
    daviscabral is on a distinguished road

      0  

    Default


    I will appreciate this too.

    Thanks!

  6. #6
    Ext User
    Join Date
    Oct 2007
    Posts
    50
    Vote Rating
    0
    robiechahine is on a distinguished road

      0  

    Default who do i have to sleep with

    who do i have to sleep with


    who do i have to sleep with to get a working sample page of this wizard.?

  7. #7
    Ext User
    Join Date
    May 2007
    Posts
    12
    Vote Rating
    0
    yew98 is on a distinguished road

      0  

    Default sample code for Ext 2.x

    sample code for Ext 2.x


    Does the sample code for Ext 2.x should be:
    wizard = new Ext.ux.Wizard({
    id : Ext.id(),
    autoCreate:true,
    width:500,
    height:300,
    resizable:false,
    autoScroll:false
    });

    instead of :
    wizard = new Ext.ux.Wizard(Ext.id(),{
    autoCreate:true,
    width:500,
    height:300,
    resizable:false,
    autoScroll:false
    });

    It works well. Thanks.
    And I find chinese comments in the sample, are you chinese Frank Cheung?
    Me too.
    新年快乐。

  8. #8
    Sencha - Training Team RWaters's Avatar
    Join Date
    Mar 2007
    Location
    Los Angeles, CA
    Posts
    714
    Vote Rating
    0
    RWaters is on a distinguished road

      0  

    Default


    Nice work. I would recommend that the 2.x version look into converting over to a cardLayout. This would also allow breaking away from the Window so that you could place it within any Container.

  9. #9
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
    elitepros is on a distinguished road

      0  

    Default


    Very cool.. so nice.. a very user friendly UI that comes only from desktop application now we can use it in the web..

    --------------------
    Philippines Software

  10. #10
    Sencha User concep86's Avatar
    Join Date
    Dec 2007
    Posts
    51
    Vote Rating
    0
    concep86 is on a distinguished road

      0  

    Default


    ok... help the newbies... full code ..please.

    thanks