Simple ExtJS Wizard With Card Layout

Posted By Vitaliy | April 05, 2012 | ExtJS 4.0.7
1 7598
Reply to thread

Js Code

Ext.widget('panel', {
	title: 'Register New User Wizard',
	itemId: 'wizard',
	width: 400,
	height: 150,
	layout: 'card',
	defaults: {
		border: false,
		bodyPadding: 20
	},
	items: [
		{
			itemId: 'step-1',
			xtype: 'form',
			layout: 'anchor',
			defaults: { anchor: '100%' },
			items: [
				{
					xtype: 'textfield',
					fieldLabel: 'First Name',
					allowBlank: false
				},
				{
					xtype: 'textfield',
					fieldLabel: 'Last Name',
					allowBlank: false
				}
			],
			buttons: [{
				text: 'Next',
				handler: function () {
					var wizard = this.up('#wizard');
					var form = this.up('form');

					if (form.getForm().isValid()) {
						wizard.getLayout().setActiveItem('step-2');
					}
				}
			}]
		},
		{
			itemId: 'step-2',
			xtype: 'form',
			layout: 'anchor',
			defaults: { anchor: '100%' },
			items: [
				{
					xtype: 'textfield',
					inputType: 'password',
					allowBlank: false,
					fieldLabel: 'Password'
				},
				{
					xtype: 'textfield',
					inputType: 'password',
					allowBlank: false,
					fieldLabel: 'Confirmation'
				}
			],
			buttons: [{
				text: 'Create Account',
				handler: function () {
					var wizard = this.up('#wizard');
					var form = this.up('form');

					if (form.getForm().isValid()) {
						wizard.getLayout().setActiveItem('step-3');
					}
				}
			}]
		},
		{
			itemId: 'step-3',
			html: 'Account was successfully created!'
		}
	],
	renderTo: Ext.getBody()
});