ExtJS 5 Is Available Now

By Vitaliy on June 04, 2014. ExtJS 5.0.0
More details here.

Js Code

Ext.widget({
	viewModel: model,
	bind: {
		title: '{rec.title}',
		html: '{rec.body}'
	},
	xtype: 'panel',
	width: 400,
	frame: true,
	renderTo: 'output'
});    

ExtJS 4.2.2 HTML 5 Multi File Upload

By Vitaliy on February 20, 2014. ExtJS 4.2.2
The multiple attribute is new in HTML5.
Note: the multiple attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari.

Js Code

items: {
    xtype: 'form',
    border: false,
    bodyStyle: {
        padding: '10px'
    },
    items: {
        xtype: 'multifilefield',
        labelWidth: 80,
        fieldLabel: 'Choose file(s)',
        anchor: '100%',
        allowBlank: false,
        margin: 0
    }
},    

ExtJs 4.2.2 HasMany Association Bug

By Vitaliy on February 19, 2014. ExtJS 4.2.2
This type of association represents a one-to-many relationship between two models.
For example OOP Class has many Properties.

As you can see class properties were not loaded as here. And this is a bug in 4.2.2. Forum thread is here.

See how it works on ExtJS 4.1.1 here.

Js Code

Ext.define('Class', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    hasMany: {
        model: 'Property',
        name: 'properties',
        associationKey: 'properties',
        primaryKey: 'id',
        foreignKey: 'classId'
    },
    proxy: {
        type: 'rest',
        url: '/api/classes'
    }
});

Ext.define('Property', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'classId', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'rest',
        url: '/api/properties'
    }
});    

ExtJs 4.1.1 HasMany Association

By Vitaliy on February 19, 2014. ExtJS 4.1.1
This type of association represents a one-to-many relationship between two models.
For example OOP Class has many Properties.

See how it works on ExtJS 4.2.2 here.

Js Code

Ext.define('Class', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    hasMany: {
        model: 'Property',
        name: 'properties',
        associationKey: 'properties',
        primaryKey: 'id',
        foreignKey: 'classId'
    },
    proxy: {
        type: 'rest',
        url: '/api/classes'
    }
});

Ext.define('Property', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'classId', type: 'int' },
        { name: 'name', type: 'string' }
    ],
    proxy: {
        type: 'rest',
        url: '/api/properties'
    }
});    

ExtJS 4: HtmlEditor Clear All Tags Button

By Vitaliy on February 02, 2014. ExtJS 4.2.2
We can make this button as a simple plugin for HtmlEditor.

Js Code

Ext.define('Ext.form.plugin.ClearTags', {
    regex: /(<([^>]+)>)/ig,
    regexSpaces: /(\s|&nbsp;)+/g,
    ...
    onRender: function () {
        ...
        tb.add({
            ...
            handler: function () {
                var value = ed.getValue() || '',
                    result = value.replace(me.regex, ' ').replace(me.regexSpaces, ' ');
                ed.setValue(result);
            }
        });
    }
});