TabPanel: Prompt To Save Changes Before Tab Change

Posted By Vitalii | April 05, 2012 | ExtJS 4.0.7
0 3120
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	views: ['EditUserPanel'],
	init: function () {
		this.control({
			'edituser': {
				beforetabchange: this.onBeforeTabChange
			},
			'edituser textfield': {
				change: this.onChange
			},
			'edituser button[action=save]': {
				click: this.onSave
			}
		});
	},
	onBeforeTabChange: function (p, n, o) {
		if (o.saved === false) {
			Ext.Msg.confirm('Save', 'Save changes?', function (button) {
				o.saved = true;
				o.down('button[action=save]').disable();
				if (button == 'yes') {
					Ext.Msg.alert('Info', 'Data saved!', function () {
						p.getLayout().setActiveItem(n);
						p.doLayout();
					});
				} else {
					p.getLayout().setActiveItem(n);
					p.doLayout();
				}
			});
			return false;
		}
		return true;
	},
	onChange: function (field) {
		var form = field.up('form');
		var save = form.down('button[action=save]');

		form.saved = false;
		save.enable();
	},
	onSave: function (button) {
		var form = button.up('form');

		form.saved = true;
		button.disable();
	}
});
            

ExtJS 4 MVC: Implementing Dynamic Tabs

Posted By Vitalii | March 19, 2012 | ExtJS 4.0.7
0 5199
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	refs: [
		{ ref: 'tabs', selector: 'viewport > #tabs' }
	],
	init: function () {
		this.control({
			'viewport > #nav': {
				itemclick: this.onMenuItemClick
			}
		});
	},
	onMenuItemClick: function (view, rec) {
		if (!rec.raw || !rec.raw.panel) return;

		var id = rec.raw.panel;
		var cls = "App.view." + id;
		var tabs = this.getTabs();
		var tab = tabs.child('#' + id);

		if (!tab) {
			tab = tabs.add(Ext.create(cls, {
				itemId: id,
				title: rec.get('text')
			}));
		}
		tabs.setActiveTab(tab);
	}
});
            

How To Dynamically Add Tabs To TabPanel

Posted By Vitalii | March 16, 2012 | ExtJS 4.0.7
0 3551
Reply to thread

Js Code

Ext.create('Ext.tab.Panel', {
	width: 300,
	height: 150,
	defaults: { bodyPadding: 10 },
	items: [
		{
			title: 'Tab 1',
			html: 'Tab 1 content'
		}
	],
	fbar: [
		{
			text: 'Add Tab',
			handler: function () {
				var tabs = this.up('tabpanel');
				var count = tabs.items.getCount();
				var tab = tabs.add(Ext.widget('panel', {
					title: 'New Tab ' + count,
					html: 'Html ' + count
				}));
				tabs.setActiveTab(tab);
			}
		}
	],
	renderTo: 'output'
});
            

Using Card Layout

Posted By Vitalii | March 16, 2012 | ExtJS 4.0.7
0 2222
Reply to thread

Js Code

Ext.onReady(function () {
	var store = Ext.create('Ext.data.TreeStore', {
		root: {
			expanded: true,
			children: [
				{ text: "Tab 1", panel: 'tab-1', leaf: true },
				{ text: "Tab 2", panel: 'tab-2', leaf: true },
				{ text: "Tab 3", panel: 'tab-3', leaf: true }
			]
		}
	});
	var cards = Ext.create('Ext.panel.Panel', {
		region: 'center', //for border layout
		margins: '5 5 5 5',
		border: false,
		layout: 'card',
		defaults: { bodyPadding: 10 },
		items: [
			{
				title: 'Tab 1',
				itemId: 'tab-1',
				html: 'Tab 1 content'
			},
			{
				title: 'Tab 2',
				itemId: 'tab-2',
				html: 'Tab 2 content'
			},
			{
				title: 'Tab 3',
				itemId: 'tab-3',
				html: 'Tab 3 content'
			}
		]
	});
	var tree = Ext.create('Ext.tree.Panel', {
		region: 'west', //for border layout
		collapsible: true,
		title: 'Menu',
		width: 200,
		store: store,
		rootVisible: false,
		margins: '5 0 5 5',
		listeners: {
			select: function (s, m) {
				cards.getLayout().setActiveItem(m.raw.panel);
			}
		}
	});
	Ext.create('Ext.panel.Panel', {
		layout: 'border',
		width: 600,
		height: 250,
		items: [
			tree,
			cards
		],
		renderTo: 'output'
	});
});