How to allow tab key in TextArea?

Posted By Vitaliy | July 06, 2012 | ExtJS 4.1.0
0 3524
We should stop event on tab pressed and insert tab symbol at cursor position.

Js Code

Ext.widget('textareafield', {
	width: 300,
	height: 100,
	enableKeyEvents: true,
	tabText: '\t',
	listeners: {
		keydown: function (f, e) {
			if (e.getKey() == e.TAB) {
				e.stopEvent();
				f.insertAtCursor(f.inputEl.dom, f.tabText);
			}
		}
	},
	insertAtCursor: function (el, ins) {
		if (el.setSelectionRange) {
			var withIns = el.value.substring(0, el.selectionStart) + ins;
			var pos = withIns.length;
			el.value = withIns + el.value.substring(el.selectionEnd, el.value.length);
			el.setSelectionRange(pos, pos);
		}
		else if (document.selection) {
			document.selection.createRange().text = ins;
		}
	},
	renderTo: Ext.getBody()
});
            

MVC Application: Add Custom Events

Posted By Vitaliy | June 26, 2012 | ExtJS 4.1.0
0 3495
Reply to thread

Js Code

Ext.define('App.controller.Main', {
	extend: 'Ext.app.Controller',
	stores: ['Users'],
	init: function () {
		this.log('controller init');

		//add event
		this.application.addEvents('UsersStoreLoaded');

		this.getUsersStore().on('load', function (store) {
			this.log('store on load');
			//fire event
			this.application.fireEvent('UsersStoreLoaded', store);
		}, this); // controller scope

		//handle event
		this.application.on('UsersStoreLoaded', function (store) {
			this.log('app on UsersStoreLoaded');
		});
	},
	log: function (msg) {
		this.application.log(msg);
	}
});
            

Listening RowEdit plugin in controller

Posted By Vitaliy | June 23, 2012 | ExtJS 4.1.0
0 3348
Reply to thread

Js Code

Ext.define('App.controller.Main', {
    extend: 'Ext.app.Controller',
    views: ['user.List'],
    stores: ['Users'],
    init: function () {
        this.control({
            'userlist': {
                render: function () { this.log('render'); },
                //plugin events
                beforeedit: function () { this.log('beforeedit'); },
                edit: function () { this.log('edit'); },
                validateedit: function () { this.log('validateedit'); }
            }
        });
    },
    log: function (msg) {
        Ext.get('log').createChild({
            tag: 'div',
            html: Ext.String.format('{0} {1}', Ext.Date.format(new Date(), 'g:i:s:ms'), msg)
        });
    }
});
            

Detect IFrame Load Event

Posted By Vitaliy | April 26, 2012 | ExtJS 4.0.7
0 5930
Reply to thread

Js Code

Ext.widget('panel', {
	title: 'My Slow IFrame',
	width: 300,
	height: 100,
	items: {
		xtype: 'component',
		autoEl: {
			tag: 'iframe',
			style: 'height: 100%; width: 100%; border: none;',
			src: '/PostData/GetContentWithSleep'
		},
		listeners: {
			load: {
				element: 'el',
				fn: function () {
					this.parent().unmask();
				}
			},
			render: function () {
				this.up('panel').body.mask('Loading...');
			}
		}
	},
	renderTo: Ext.getBody()
});