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?

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.