Extjs Card Layout Next Previous Navigation for Modern

Main.js

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting causes an instance of this class to be created and
 * added to the Viewport container.
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('CardLayoutSample.view.main.Main', {
	extend: 'Ext.tab.Panel',
	xtype: 'mainView',
	id: 'mainView',
	itemId: 'mainView',
	reference: 'mainView',
	requires: [
		'Ext.MessageBox',

		'CardLayoutSample.view.main.MainController',
		'CardLayoutSample.view.main.MainModel',
		'CardLayoutSample.view.main.List'
	],

	controller: 'main',
	viewModel: 'main',

	defaults: {
		tab: {
			iconAlign: 'top'
		},
		styleHtmlContent: true
	},

	tabBarPosition: 'bottom',

	items: [{
		xtype: 'container',
		title: 'Nav Card View',
		iconCls: 'x-fa fa-users',
		layout: {
			type: 'vbox',
			pack: 'start',
			align: 'stretch'
		},
		items: [{
			xtype: 'titlebar',
			id: 'titlebar',
			itemId: 'titlebar',
			reference: 'titlebar',
			title: 'Custom Title very long title can\'t be read',
			docked: 'top',
			items: [{
				reference: 'btnBack',
				id: 'btnBack',
				itemId: 'btnBack',
				iconCls: 'x-fa fa-chevron-left',
				align: 'left'
			}, {
				iconCls: 'x-fa fa-bars',
				align: 'left'
			}, {
				iconCls: 'x-fa fa-home',
				align: 'right'
			}],

		}, {
			xtype: 'navigationview',
			id: 'ncView',
			itemId: 'ncView',
			navigationBar: false,
			flex: 1,
			height: '100%',
			listeners: {
				push: function(sender, view, args) {
					debugger;
					if (Ext.getCmp('mainView'))
						Ext.getCmp('mainView').getController().redirectTo(sender.getActiveItem().title);
					//CardLayoutSample.app.getController('controller.main').redirectTo(view.title);
				},
				pop: function(sender, view, args) {
					debugger;

					if (Ext.getCmp('mainView'))
						Ext.getCmp('mainView').getController().redirectTo(sender.getActiveItem().title);

					//CardLayoutSample.app.getController('controller.main').redirectTo(view.title);
				}
			},
			items: [{
				title: 'Card View',
				id: 'cView',
				itemId: 'cView',
				config: {
					backButtonStack: []
				},
				layout: {
					type: 'card',
					pack: 'start',
					align: 'stretch',
					animation: 'slide',
					deferredRender: true
				},

				items: [{
					xtype: 'cardone',
					//itemId:'cardone'
				}, {
					xtype: 'cardtwo',
					//itemId:'cardtwo'
				}, {
					xtype: 'cardthree',
					//itemId:'cardtwo'
				}, {
					xtype: 'cardfour',
				}],
				listeners: {
					initialize: function(sender, eOpts) {
						debugger;
						var titleBar = Ext.getCmp('titlebar');
						if (titleBar) {
							var btnBack = Ext.getCmp('btnBack'),
								activeItem = sender.getActiveItem();


							if (activeItem === undefined || activeItem === null)
								return;

							titleBar.setTitle(activeItem.getTitle()); //set first item title
							btnBack.hide(); //TODO::initially hide this in ui
							//Ext.getCmp('cView').config.backButtonStack.push(activeItem.xtype);

							btnBack.on('tap', function() {
								debugger;
								var length = Ext.getCmp('cView').config.backButtonStack.length;
								if (length > 0) {
									var oldCard = Ext.getCmp('cView').config.backButtonStack.pop(); //[length - 1];
									Ext.getCmp('cView').setActiveItem(oldCard);
								}

							}, this);
						}
					},
					activeitemchange: function(sender, newActiveItem, oldActiveItem, eOpts) {
						debugger;
						var titleBar = Ext.getCmp('titlebar');
						if (titleBar) {

							var newIndex = sender.items.indexOf(newActiveItem),
								oldIndex = sender.items.indexOf(oldActiveItem),
								hasPrevious = sender.items.indexOf(newActiveItem) <= 0 ? false : true,
								newTitle = newActiveItem.getTitle() || '&nbsp;',
								oldTitle = oldActiveItem.getTitle() || '&nbsp;',
								animation = sender.layout.getAnimation();
							//backButtonStack = Ext.getCmp('cView').config.backButtonStack, //TODO:: this should be replaced in class config
							btnBack = Ext.getCmp('btnBack'); //titleBar.query("button[itemId=btnBack]");


							titleBar.setTitle(newTitle);
							if (animation && animation.isAnimation) {
								animation.setReverse(newIndex < oldIndex);
							}
							//sender.layout.getAnimation().setDirection(newIndex > oldIndex ? "left" : "right");

							//////////////////////
							//when we go from card 4 back to 3 my old active item is 4, so 
							//without this check newIndex > oldIndex will again push old card 4 to backButtonStack
							//which introduces cycle 3 to 4 & again 4 to 3.
							//////////////////////

							if (newIndex > oldIndex)
								Ext.getCmp('cView').config.backButtonStack.push(oldActiveItem.xtype);
							else {
								debugger;
								////////////////////
								//If new index 1(card 2) and old index 3(card 4) then
								//Array.splice(1, (3-1)) -> Array.splice(1, 2) removes two items from start index of 1
								//
								//	var arr = ["cardone", "cardtwo", "cardthree"]; (currently at card 4)
								//	var removed = arr.splice(1, 2);
								//	-----------OUTPUT-----------
								// 	Original array : cardone
								// 	Removed array : cardtwo,cardthree
								//
								//	So you can go back from card 2 to card 1 (but not to card 4 because current item will become 
								//old item and introduce the loopback cycle as stated above).
								//////////////////////

								if (Ext.getCmp('cView').config.backButtonStack.length > 0)
									Ext.getCmp('cView').config.backButtonStack.splice(newIndex, (oldIndex - newIndex))
							}


							if (hasPrevious) {
								btnBack.show();
							} else {
								//reset the stack if no previous cards are available
								Ext.getCmp('cView').config.backButtonStack = [];
								btnBack.hide(); //btnBack[hasPrevious ? 'show' : 'hide']();								
							}

						}

					}
				}
			}]

		}]

	}]
});

/**
 * @class CardLayoutSample.view.main.CardOne
 * @extends Container
 * Description
 */
Ext.define('CardLayoutSample.view.main.CardOne', {
	extend: 'Ext.Container',
	xtype: 'cardone',
	layout: {
		type: 'vbox'
	},
	requires: [

	],

	config: {
		title: 'Card One'
	},
	items: [{
		xtype: 'button',
		text: 'Go to Card Two',
		nextCardId: 'cardtwo',
		previousCardId: '',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'text',
		text: 'Go to Card Four',
		nextCardId: 'cardfour',
		previousCardId: '',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'container',
		flex: 1,
		layout: {
			type: 'hbox',
			align: 'center',
			pack: 'center'
		},
		style: {
			backgroundColor: '#2196F3',
			margin: '10px'
		},
		items: [{
			xtype: 'label',
			style: {
				fontSize: '5em'
			},
			html: "1"
		}],
	}]
});

/**
 * @class CardLayoutSample.view.main.CardTwo
 * @extends Container
 * Description
 */
Ext.define('CardLayoutSample.view.main.CardTwo', {
	extend: 'Ext.Container',
	xtype: 'cardtwo',

	layout: {
		type: 'vbox'
	},
	requires: [

	],

	config: {
		title: 'Card Two'
	},
	items: [{
		xtype: 'button',
		text: 'Go to Card Three',
		nextCardId: 'cardthree',
		previousCardId: 'cardone',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'container',
		flex: 1,
		layout: {
			type: 'hbox',
			align: 'center',
			pack: 'center'
		},
		style: {
			backgroundColor: '#FFCA28',
			margin: '10px'
		},
		items: [{
			xtype: 'label',
			style: {
				fontSize: '5em'
			},
			html: "2"
		}],
	}]
});

/**
 * @class CardLayoutSample.view.main.CardThree
 * @extends Container
 * Description
 */
Ext.define('CardLayoutSample.view.main.CardThree', {
	extend: 'Ext.Container',
	xtype: 'cardthree',

	layout: {
		type: 'vbox'
	},
	requires: [

	],

	config: {
		title: 'Card Three'
	},
	items: [{
		xtype: 'button',
		text: 'Go To Card One',
		nextCardId: 'cardone',
		previousCardId: 'cardtwo',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'button',
		text: 'Go To Card Four',
		nextCardId: 'cardfour',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'container',
		flex: 1,
		style: {
			backgroundColor: '#E64A19',
			margin: '10px'
		},
		layout: {
			type: 'hbox',
			align: 'center',
			pack: 'center'
		},
		items: [{
			xtype: 'label',
			style: {
				fontSize: '5em'
			},
			html: "3"
		}],
	}]
});

/**
 * @class CardLayoutSample.view.main.CardFour
 * @extends Container
 * Description
 */
Ext.define('CardLayoutSample.view.main.CardFour', {
	extend: 'Ext.Container',
	xtype: 'cardfour',

	layout: {
		type: 'vbox'
	},
	requires: [

	],

	config: {
		title: 'Card Four'
	},
	items: [{
		xtype: 'button',
		text: 'Go To Card Two',
		nextCardId: 'cardtwo',
		previousCardId: 'cardthree',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'button',
		text: 'Go To Card Three',
		nextCardId: 'cardthree',
		previousCardId: 'cardthree',
		handler: function() {
			debugger;
			Ext.getCmp('cView').setActiveItem(this.nextCardId);
		},
	}, {
		xtype: 'container',
		flex: 1,
		style: {
			backgroundColor: 'rgb(255,64,129)',
			margin: '10px'
		},
		layout: {
			type: 'hbox',
			align: 'center',
			pack: 'center'
		},
		items: [{
			xtype: 'label',
			style: {
				fontSize: '5em'
			},
			html: "4"
		}],
	}]
});