JavaScript
Data
Run Code
Open in Fiddle
Ext.define('Fiddle.overrides.data.schema.Role', { override: 'Ext.data.schema.Role', getAssociatedItem: function (record) { return this.callParent(arguments) || this.getAssociatedItemFromSession(record); }, getAssociatedItemFromSession: function (record) { if (record.session && !this.isMany) { var associatedRecordId = record.get(this.association.getFieldName()); if (associatedRecordId != null) { // usage of '!=' no mistake return record.session.peekRecord(this.type, associatedRecordId); } } } }); Ext.define('Fiddle.model.Base', { extend: 'Ext.data.Model', schema: { namespace: 'Fiddle.model', proxy: { url: '{entityName:lowercase}s.json' } } }); Ext.define('Fiddle.model.Project', { extend: 'Fiddle.model.Base', fields: ['id', 'name', 'description'] }); Ext.define('Fiddle.model.Model', { extend: 'Fiddle.model.Base', fields: ['id', 'name', { name: 'projectId', reference: 'Project' }] }); Ext.create('Ext.grid.Panel', { plugins: ['viewport'], defaultListenerScope: true, viewModel: { stores: { users: { model: 'Model', session: true, pageSize: 0, autoLoad: true }, projects: { model: 'Project', session: true, pageSize: 0, autoLoad: true, listeners: { load: 'onProjectsLoad' } } } }, bind: '{users}', session: true, columns: [{ dataIndex: 'id' }, { xtype: 'templatecolumn', tpl: '{project.name}' }, { xtype: 'templatecolumn', tpl: '{project.description}', flex: 1 }], onProjectsLoad: function () { this.getView().refresh(); } });