ExtJs 4.1: TreeGrid Example

By Vitaliy on September 16, 2012. ExtJS 4.1.1
4761
Using Ext.tree.Panel  with ASP.NET MVC 3 example.
Sources in VS 2010 Solution

Js Code

//\Scripts\app\model\MenuItem.js
Ext.define('Cms.model.MenuItem', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'int', useNull: true },
        { name: 'ParentItemId', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'Url', type: 'string' },
        { name: 'CssClass', type: 'string' },
        { name: 'leaf', type: 'bool', convert: function (v, r) { return !r.raw.HasChildren; } }
    ]
});

//\Scripts\app\store\MenuItemsTree.js
Ext.define('Cms.store.MenuItemsTree', {
    extend: 'Ext.data.TreeStore',
    model: 'Cms.model.MenuItem',
    defaultRootId: '',
    proxy: {
        type: 'ajax',
        url: '/PostData/MenuItemsGetByParent'
    }
});    

ExtJs 4.1: Read complex json with hasOne association

By Vitaliy on September 15, 2012. ExtJS 4.1.0
4134
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 Render Image To Grid Field

By Vitaliy on June 26, 2012. ExtJS 4.1.0
2550
Reply to thread

Js Code

{
	header: 'Online',
	dataIndex: 'online',
	align: 'center',
	width: 50,
	renderer: function (value, meta, record) {
		var url = value == true ?
			'/Content/images/icons/user-online.png' :
			'/Content/images/icons/user-offline.png';
		meta.tdCls = 'td-img';

		return '<img src="'+url+'" />';
	}
}