navigatingPanels.js

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);
								console.log(Ext.getCmp('navigatingPanels'));

							}
						}
					]
				},
				{
					xtype: 'fieldset',
					title: 'Form 0',
					items: [
						{
							xtype: 'textfield',
							label: 'Form 0',
							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("hello");
							}
						}
					]
				}
		]
	}

});


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'
					}
				]
			}
	]
});