Simple Online ExtJS Code Editor

By Vitaliy on June 15, 2012. ExtJS 4.1.0
9818
Write your code and press "Run Code".

Update: tab key enabled.

Js Code

{
    text: 'Run Code',
    handler: function () {
        var code = this.up('panel').down('#code').getValue();

        this.up('#code-editor').clearOutput();

        try {
            new Function(code)();
        } catch (e) {
            Ext.Msg.alert('Error', e.message);
        }
    }
}    

Detect IFrame Load Event

By Vitaliy on April 26, 2012. ExtJS 4.0.7
4765
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: 'output'
});    

How To Add Custom Events To Ext Component

By Vitaliy on April 26, 2012. ExtJS 3.4.0
2988
Reply to thread

Js Code

MyApp.customMenu = Ext.extend(Ext.menu.Menu, {
	constructor: function (config) {
		config = config || {};
		MyApp.customMenu.superclass.constructor.call(this, Ext.apply(config, {
			items: [
				{ text: 'New File...' },
				{ text: 'New Project...' }
			]
		}));
		//You can add custom events in constructor
		this.addEvents('newfile');
	},
	initComponent: function () {
		MyApp.customMenu.superclass.initComponent.apply(this, arguments);
		//You can add custom events in initComponent
		this.addEvents('newproject');
		this.on('itemclick', this.onItemClick, this);
	},
	onItemClick: function (item, e) {
		switch (item.text) {
			case 'New File...': this.fireEvent('newfile'); break;
			case 'New Project...': this.fireEvent('newproject'); break;
		}
	}
});