View difference between Paste ID: 5k9x4w7Y and P4k04dBQ

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