The most important method in CardLayout is setActiveItem. Since only one panel is displayed at a time, the only way to move from one Component to the next is by calling setActiveItem, passing the next panel to display (or its id or index). The layout itself does not provide a user interface for handling this navigation, so that functionality must be provided by the developer.
Today i am demonstrating How we can leverage the Card Layout to create a Wizard-based User Registration form. I have used ExtJS v4+ with MVC.
First, create two forms which will work as a child container.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
Ext.define(‘TechZoo.view.PersonalForm’, {
extend : ‘Ext.form.Panel’,
alias : ‘widget.personal’,
layout : ‘anchor’,
itemId : ‘personalForm’,
defaults: { anchor: ‘100%’, msgTarget: ‘side’},
items : [{
xtype : ‘textfield’,
fieldLabel: ‘Title’,
//labelWidth : 10,
size : 10,
style : {width : ‘20%’}
},{
xtype: ‘textfield’,
fieldLabel: ‘First Name’,
allowBlank: false
},{
xtype: ‘textfield’,
fieldLabel: ‘Last Name’,
allowBlank: false
},{
xtype: ‘textfield’,
fieldLabel: ‘Phone’
},{
xtype: ‘textfield’,
fieldLabel: ‘Fax’
}],
buttons : [{text: ‘Next’}]
});
|
Second child form, AddressForm
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
Ext.define(‘TechZoo.view.AddressForm’, {
extend : ‘Ext.form.Panel’,
alias : ‘widget.address’,
layout : ‘anchor’,
itemId : ‘addressForm’,
defaults: { anchor: ‘100%’ },
items : [{
xtype: ‘textfield’,
fieldLabel: ‘Address’
},{
xtype: ‘textfield’,
fieldLabel: ‘City’
},,{
xtype: ‘textfield’,
fieldLabel: ‘State’
},{
xtype: ‘textfield’,
fieldLabel: ‘Country’
}],
buttons : [{
text : ‘<< Back',
name : ‘back’
},{
text: ‘Create Account’
}]
});
|
Now create a Final child panel, which will show a message if Registration successful.
|
1
2
3
4
5
6
|
Ext.define(‘TechZoo.view.MessagePanel’, {
extend : ‘Ext.Panel’,
alias : ‘widget.msg’,
itemId : ‘msgPanel’,
html : ‘Registration Success!‘
});
|
We need a main container which act as a parent container and has a card layout associated to it.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
Ext.define(‘TechZoo.view.WizardForm’, {
extend : ‘Ext.form.Panel’,
alias : ‘widget.wizard’,
width : 400,
layout : ‘card’,
itemId : ‘wizardForm’,
title : ‘Wizard Based Registration’,
defaults: {
//border : true,
bodyPadding: 20
},
items: [{
xtype: ‘personal’
},{
xtype: ‘address’
},{
xtype: ‘msg’
}]
});
|
Now its time to create a WizardController.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
Ext.define(‘TechZoo.controller.WizardController’, {
extend: ‘Ext.app.Controller’,
views: [‘PersonalForm’, ‘AddressForm’, ‘MessagePanel’, ‘WizardForm’],
init: function () {
this.control({
‘personal button’: {
click : this.showAddress
},
‘address button’: {
click: this.createAccount
},
‘address button[name=back]’: {
click: function(btn) {
var wizard = btn.up(‘#wizardForm’);
wizard.getLayout().setActiveItem(‘personalForm’);
}
}
});
},
showAddress : function (btn) {
console.log(‘Button clicked…’ + btn.getText());
var wizard = btn.up(‘#wizardForm’);
var form = btn.up(‘form’);
if(form.getForm().isValid()) {
wizard.getLayout().setActiveItem(‘addressForm’);
}
},
createAccount: function (btn) {
var wizard = btn.up(‘#wizardForm’);
var form = btn.up(‘form’);
if(form.getForm().isValid()) {
wizard.getLayout().setActiveItem(‘msgPanel’);
}
}
});
|
And we need a app.js file to initialize the app.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
Ext.Loader.setConfig({enabled: true });
Ext.application({
name: ‘TechZoo’,
appFolder : ‘app’,
controllers: [
‘WizardController’
],
launch: function () {
Ext.create(‘TechZoo.view.WizardForm’, {
renderTo: ‘output’
});
}
});
|
Last, a HTML page which include all this js files.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“utf-8” />
<title>extjs panel header click event</title>
<link rel=“stylesheet” type=“text/css” href=“extjs/resources/css/ext-all.css”>
</head>
div#output {margin:100px;}
<body>
<div id=“output”></div>
</body>
</html>
|
The output will look similar to below….
Source techzoo.org
