ExtJs 4.1: Read complex json with hasOne association

By Vitaliy on September 15, 2012. ExtJS 4.1.0
3948
Ext.data.association.HasOne - represents a one to one association with another model.
The owner model is expected to have a foreign key which references the primary key of the associated model

Js Code

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    associations: [{ type: 'hasOne', model: 'Status', associationKey: 'status'}]
});

Ext.define('Status', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'title', type: 'string', mapping: 'st_title' }
    ]
});    

How To Move Data Between Two Multiselects

By Vitaliy on April 22, 2012. ExtJS 4.0.7
2716
Reply to thread
Drag-and-Drop version here

Js Code

{
	itemId: 'toright',
	text: '>',
	handler: function () {
		var form = this.up('form');
		var values = form.down('#left').getValue();
		if (values.length) {
			var left = form.down('#left').store;
			var right = form.down('#right').store;
			var record;
			Ext.Array.each(values, function (v) {
				record = left.findRecord('text', v);
				left.remove(record);
				right.add({ text: v });
			});
		}
	}
}    

How To Change A Column Template On The Rendered Grid Column?

By Vitaliy on March 17, 2012. ExtJS 4.0.7
3163
Reply to thread

Js Code

Ext.define('Ext.grid.column.UpdatableTemplate', {
	extend: 'Ext.grid.column.Column',
	alias: 'widget.updatabletemplatecolumn',
	requires: ['Ext.XTemplate'],
	constructor: function (cfg) {
		var me = this;
		me.callParent(arguments);
		me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);
		me.renderer = function (value, p, record) {
			var data = Ext.apply({}, record.data, record.getAssociatedData());
			return me.tpl.apply(data);
		};
	},
	setTemplate: function (tpl) {
		this.tpl = Ext.create('Ext.XTemplate', tpl);
	}
});

Ext.create('Ext.grid.Panel', {
	title: 'Simpsons',
	width: 500,
	height: 200,
	store: {
		fields: ['name', 'email', 'phone'],
		data: [
			{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
			{ 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
			{ 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
			{ 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }
		]
	},
	tbar: [
		{
			text: 'First Template',
			handler: function () {
				this.up('grid').changeTemplate('name', '<b>{name}</b> ({email})');
			}
		},
		{
			text: 'Second Template',
			handler: function () {
				this.up('grid').changeTemplate('name', '<b>{name}</b> ({phone})');
			}
		}
	],
	columns: [
		{ header: 'Name', dataIndex: 'name', xtype: 'updatabletemplatecolumn', tpl: '{name}', flex: 1 }
	],
	changeTemplate: function (column, tpl) {
		Ext.Array.each(this.columns, function (item) {
			if (item.dataIndex == column) {
				item.setTemplate(tpl);
				return false;
			}
		});
		this.getView().refresh();
	},
	renderTo: 'output'
});