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();
	}
});