Wizard Layout

var card1 = new Ext.panel.Panel({
bodyStyle: 'padding: 20px',
title: 'Personal Info',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name'
}, {
xtype: 'textfield',
fieldLabel: 'Last Name'
}, {
xtype: 'textfield',
fieldLabel: 'Email Address',
vtype: 'email'
}]
});
var card2 = new Ext.panel.Panel({
bodyStyle: 'padding: 20px',
title: 'Account Info',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Username'
}, {
xtype: 'textfield',
fieldLabel: 'Password',
inputType: 'password'
}]
});
var card3 = new Ext.panel.Panel({
bodyStyle: 'padding: 20px',
title: 'Account Creation Successful!',
border: false,
html: 'Success!'
});

var createUserWizard = Ext.create('Ext.panel.Panel', {
title: 'Create User Wizard',
layout: 'card',
deferredRender: true,
items: [card1, card2, card3],
bbar: ['->', {
xtype: 'button',
text: 'Previous',
handler: function(btn){
var layout = cardPanel.getLayout();
if (layout.getPrev()) {
layout.prev();
}
}
}, {
xtype: 'button',
text: 'Next',
handler: function(btn){
var layout = cardPanel.getLayout();
if (layout.getNext()) {
layout.next();
}
}
}]
});