TabPanel: Prompt To Save Changes Before Tab Change

By Vitaliy on April 05, 2012. ExtJS 4.0.7
3024
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();
	}
});    

How To Dynamically Add Tabs To TabPanel

By Vitaliy on March 16, 2012. ExtJS 4.0.7
3399
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'
});    

Tabpanel: Change Active Tab By Click On Treepanel Item

By Vitaliy on March 16, 2012. ExtJS 4.0.7
2943
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 tabs = Ext.create('Ext.tab.Panel', {
		region: 'center', //for border layout
		margins: '5 5 5 5',
		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) {
				tabs.setActiveTab(m.raw.panel);
			}
		}
	});
	Ext.create('Ext.panel.Panel', {
		layout: 'border',
		width: 600,
		height: 250,
		items: [
			tree,
			tabs
		],
		renderTo: 'output'
	});
});