CODEWITHSUNDEEP
javascriptformsextjswizard
Mehdi Fanai
Mehdi Fanai

Reputation: 4059

How to create an advanced wizard form usingcard layout on Extjs 3.2?

There was an Ext.ux.wizard for extjs 2.0 which we could create wizard like forms for extjs and easily validate form elements when user clicked (eg)next button.see demo here: http://www.siteartwork.de/wizardcomponent_demo . On extjs 3.2 there is card layout which helps creating wizards.see demo: http://dev.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html .
Code: 

/*  
 * ================  CardLayout config (Wizard)  =======================  
 */  
var cardWizard = {  
    id:'card-wizard-panel',  
    title: 'Card Layout (Wizard)',  
    layout:'card',  
    activeItem: 0,  
    bodyStyle: 'padding:15px',  
    defaults: {border:false},  
    bbar: ['->', {  
        id: 'card-prev',  
        text: '« Previous',  
        handler: cardNav.createDelegate(this, [-1]),  
        disabled: true  
    },{  
        id: 'card-next',  
        text: 'Next »',  
        handler: cardNav.createDelegate(this, [1])  
    }],  
    items: [{  
        id: 'card-0',  
        html: '<h1>Welcome to the Demo Wizard!</h1><p>Step 1 of 3</p><p>Please click the "Next" button to continue...</p>'  
    },{  
        id: 'card-1',  
        html: '<p>Step 2 of 3</p><p>Almost there.  Please click the "Next" button to continue...</p>'  
    },{  
        id: 'card-2',  
        html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'  
    }]  
};

but there seems no validations when i click next or there is no submit button when i reach last step of wizard.does anybody have any examples on a more developed wizard?

Upvotes: 2

Views: 9743

Answers (1)

zihotki
zihotki

Reputation: 5191

Check this thread - http://www.sencha.com/forum/showthread.php?121059-Making-a-Wizard&highlight=wizard
Or use ready extension - http://code.google.com/p/ext-ux-wiz/ (it seems to be working with ExtJS 3.2), the forum thread for it is here - http://www.sencha.com/forum/showthread.php?36627-2.1-Ext.ux.Wiz-a-wizard-component-for-Ext-JS/page25

Upvotes: 2

Related Questions