navigatingPanels.js

Ext.define('MyApp.view.navigatingPanels',{
	extend: 'Ext.Panel',
	id: 'navigatingPanels',
	xtype: 'navigatingPanels',
	config:{
		iconCls:'user',
		title: 'Navigating Panels',
		layout    : {
			type: 'card',
            animation: {
				type: 'slide',
				direction: 'left',
                duration: 250
            }
        },
		defaults:{
			styleHtmlContent: 'true'
		},
	items: [
				{
					docked: 'top',
					xtype: 'toolbar',
					title: 'Create Patient',
					items: [
						{
							text: 'Back',
							ui: 'back',
							align: 'left',
							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',
									duration: 250
								});
								//change card
								Ext.getCmp('navigatingPanels').setActiveItem(0);
								//hide back button
								Ext.getCmp('backButton').hide();
								//change the slide direction to left
								Ext.getCmp('navigatingPanels').getLayout().setAnimation({
									type: 'slide',
									direction: 'left',
									duration: 250
								});
							}
						}
					]
				},
				{
					xtype: 'fieldset',
					title: 'Form 1',
					scrollable: 'vertical',
					items: [
						{
							xtype: 'textfield',
							label: 'Name',
							name: 'name',
						},
						{
							xtype:'button',
							text:'Continue',
							ui: 'confirm',
							//TODO add some action: to store data
							//save data & move to form2
							handler: function() {
							//change card
								Ext.getCmp('navigatingPanels').setActiveItem(1);
								//show back button
								Ext.getCmp('backButton').show();
							}
						}
					]
				},
				{
					xtype: 'fieldset',
					title: 'Form 2',
					scrollable: 'vertical',
					items: [
						{
							xtype: 'textareafield',
							label: 'Message',
							name: 'message'
						},
						{
							xtype:'button',
							text:'Submit Data',
							ui: 'confirm',
							//TODO add some action: to store data
							//action: 'Submit Data'
						}
					]
				}
		]
	}

});