PDA

View Full Version : Bind Associated Data to Grid Panel



swardson
1 Aug 2013, 1:33 PM
Hey all,

I have a JSON store loading data from a .json file that has associations.

Here is the model:


Ext.define('AbsenceRequestManagement.model.RequestModel', {

extend: 'Ext.data.Model',

fields: [
{name: 'requestId', type: 'int'},
{name: 'cid', type: 'int'},
{name: 'start', type: 'date', dateFormat: 'c'},
{name: 'end', type: 'date', dateFormat: 'c'},
{name: 'loc', type: 'string'},
{name: 'notes', type: 'string'},
{name: 'url', type: 'string'},
{name: 'ad', type: 'boolean'},
{name: 'rem', type: 'string'},
{name: 'n', type: 'boolean'},
{name: 'reason', type: 'string'},
{name: 'recurrence', type: 'string'},
{name: 'resources', type: 'array'},
{name: 'approvers', type: 'array'},
{name: 'conflicts', type: 'array'}
],

associations: [
{type: 'hasMany', model: 'AbsenceRequestManagement.model.ResourceModel', name: 'approvers'},
{type: 'hasMany', model: 'AbsenceRequestManagement.model.ResourceModel', name: 'resources'},
{type: 'hasMany', model: 'AbsenceRequestManagement.model.ConflictModel', name: 'conflicts'}
]
});

I am successfully loading the data with my store and passing it off to some views for form display etc. the hasMany conflicts set of data needs to be displayed in a gridPanel. Here is it's model


Ext.define('AbsenceRequestManagement.model.ConflictModel', {

extend: 'Ext.data.Model',

fields: [
{name: 'conflictId', type: 'int'},
{name: 'resourceName', type: 'string'},
{name: 'conflict', type: 'string'},
{name: 'start', type: 'date', dateFormat: 'c'},
{name: 'end', type: 'date', dateFormat: 'c'}
],

belongsTo: 'AbsenceRequestManagement.model.RequestModel'
});

and here is the grid panel:


Ext.define('AbsenceRequestManagement.view.ConflictsGrid', {
extend: 'Ext.grid.Panel',

alias: 'widget.conflictsGrid',
itemId: 'conflictsGrid',

requires: [
'AbsenceRequestManagement.model.ConflictModel'
],

enableColumnHide: false,
enableColumnMove: false,

border: false,
frame: false,
bodyStyle: {background: 'transparent'},

model: 'AbsenceRequestManagement.model.ConflictModel',

columns: [
{
xtype: 'gridcolumn',
enableColumnHide: false,
dataIndex: 'resourceName',
text: 'Resource Name',
flex: 2
},
{
xtype: 'gridcolumn',
enableColumnHide: false,
dataIndex: 'conflict',
text: 'Conflict',
flex: 1
},
{
xtype: 'gridcolumn',
enableColumnHide: false,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return Ext.Date.format(value, 'd-M-Y H:i');
},
dataIndex: 'start',
text: 'Start Date',
flex: 2
},
{
xtype: 'gridcolumn',
enableColumnHide: false,
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return Ext.Date.format(value, 'd-M-Y Hi');
},
dataIndex: 'end',
text: 'End Date',
flex: 2
}
]
});

I am passing the data from one class to the grid panel instance like this:


var conflictsGrid = Ext.ComponentQuery.query('#conflictsGrid')[0];
conflictsGrid.reconfigure(o.data.conflicts);

where o is the record of RequestModel from above.

In my test code there are 2 conflict records and when the grid panel loads it loads 2 rows, but they are blank. I cannot seem to figure out how to get this data into the grid panel properly.

Any help would be fantastic!

Thanks!

Brad

evant
1 Aug 2013, 4:38 PM
A few things:

1) There is no 'array' type, so you can omit that. It's best to leave off type conversion if you don't need to do it.

2) "conflicts" is a field in your model, so it just contains the raw data array. Reconfigure expects a store, which you should be able to access by:



var store = rec.conflicts();

swardson
2 Aug 2013, 8:55 AM
You are exactly right. Thank you for replying so quickly and accurately! I am so used to Java/AS3 style MVC & OOP that some of the ways of Sencha don't come very intuitively.

Thanks again!