Code:
Ext.define('MyApp.view.navigatingPanels',{
extend: 'Ext.Panel',
id: 'navigatingPanels',
xtype: 'navigatingPanels',
config:{
iconCls:'user',
title: 'Navigating Panels',
layout: 'card',
animation: {
type: 'slide',
direction: 'left'
},
defaults:{
styleHtmlContent: 'true'
},
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Registeration Form',
items: [
{
text: 'Back',
ui: 'back',
align: 'centre',
//back button to take the user back from form2 to form1
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form1);
}
}
]
},
form1,
form2
]
}
});
var form1 = new Ext.Panel({
scrollable: 'vertical',
items:[
{
xtype: 'fieldset',
title: 'Form 1',
items: [
{
xtype: 'textfield',
label: 'Name',
name: 'name',
},
{
xtype:'button',
text:'Save Data & move to form2',
ui: 'confirm',
//TODO add some action: to store data
//save data & move to form2
handler: function() {
Ext.getCmp('navigatingPanels').setActiveItem(form2,{ type: 'slide', direction: 'right' });
console.log("Form1");
}
}
]
}
]
});
var form2 =new Ext.Panel({
scrollable: 'vertical',
items:[
{
xtype: 'fieldset',
title: 'Form 2',
items: [
{
xtype: 'textareafield',
label: 'Message',
name: 'message'
},
{
xtype:'button',
text:'Submit Data',
ui: 'confirm',
//TODO add some action: to store data
//action: 'Submit Data'
}
]
}
]
});