ExtJs 4: Multiple File Upload

Posted By Vitaliy | September 19, 2012 | ExtJS 4.1.1
0 12075
Flash multi upload sample.
Note: you must have flash 10+ installed.
Sources in VS 2010 Solution
See ExtJS 6 version without Flash here.

Js Code

Ext.create('Ext.ux.multiupload.Panel', {
    title: 'Upload',
    width: 600,
    height: 300,
    frame: true,
    uploadConfig: {
        uploadUrl: '/'+'postdata'+'/'+'upload',
        maxFileSize: 10 * 1024 * 1024,
        maxQueueLength: 10
    },
    renderTo: Ext.getBody()
});
            

Simple Online ExtJS Code Editor

Posted By Vitaliy | June 15, 2012 | ExtJS 4.1.0
1 10753
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

Posted By Vitaliy | April 26, 2012 | ExtJS 4.0.7
0 5423
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()
});
            

How To Add Custom Events To Ext Component

Posted By Vitaliy | April 26, 2012 | ExtJS 3.4.0
0 3375
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;
		}
	}
});