javascript - How to create an advanced wizard form usingcard layout on Extjs 3.2? -
there ext.ux.wizard extjs 2.0 create wizard forms extjs , validate form elements when user clicked (eg)next button.see demo here: http://www.siteartwork.de/wizardcomponent_demo . on extjs 3.2 there card layout 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 demo wizard!</h1><p>step 1 of 3</p><p>please click "next" button continue...</p>' },{ id: 'card-1', html: '<p>step 2 of 3</p><p>almost there. please click "next" button continue...</p>' },{ id: 'card-2', html: '<h1>congratulations!</h1><p>step 3 of 3 - complete</p>' }] };
but there seems no validations when click next or there no submit button when reach last step of wizard.does have examples on more developed wizard?
check 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 working extjs 3.2), forum thread here - http://www.sencha.com/forum/showthread.php?36627-2.1-ext.ux.wiz-a-wizard-component-for-ext-js/page25
Comments
Post a Comment