PDA

View Full Version : Populate sub grid with data from main grid?



scottjmurphy
4 May 2012, 10:55 AM
I have a scenario where I have a grid displaying "parent" records. When the user clicks on one of the rows, I want to populate a separate grid with the data of one of the hasMany associations of the selected record.

PeopleModel.js:

Ext.define('TestApp.model.ChildModel', {
extend: 'Ext.data.Model',
belongsTo: 'TestApp.model.ParentModel',
fields: [
'id',
'name'
]
});


Ext.define('TestApp.model.ParentModel', {
extend: 'Ext.data.Model',
fields: [
'id',
'name'
],
associations: [
{ type: 'hasMany', model: 'TestApp.model.ChildModel', name: 'Children' }
]
});


PeopleStore.js:

Ext.define('TestApp.store.PeopleStore', {
extend: 'Ext.data.Store', storeId: 'PeopleStore',
model: 'TestApp.model.ParentModel',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: '/Home/GetParents'
}
}
});


PeopleController.js:

Ext.define('TestApp.controller.PeopleController', {
extend: 'Ext.app.Controller',
stores: ['PeopleStore'],
models: ['PeopleModel'],
views: ['ParentView', 'ChildrenView'],

init: function () {
this.control({
'parentlist > grid': {
itemdblclick: this.populateChildren
}
});
},

populateChildren: function (grid, record) {
var viewport = grid.up('viewport');
var childrenGrid = viewport.down('childlist').down('grid');

//TODO: populate childrenGrid with record.data.Children
}
});
My viewport has two views: parentlist and childrenlist. Each view contains a grid to display their respective data.

Is what I am trying to do feasible with ExtJS 4? What am I missing? Any help would be greatly appreciated.

Thanks,
Scott

vietits
4 May 2012, 4:55 PM
I think what you are doing is OK. You should use reconfigure() to bind store of children to the childrenGrid.


populateChildren: function (grid, record) {
var viewport = grid.up('viewport');
var childrenGrid = viewport.down('childlist').down('grid');


//TODO: populate childrenGrid with record.data.Children
childrenGrid.reconfigure(record.Children());
}

scottjmurphy
7 May 2012, 1:33 PM
The .reconfigure() method worked perfectly. Thank you for pointing it out to me.

One other thing I noticed is that I had to use record.raw.Children instead of record.data.Children in the parent grid's click event handler. Is there a way to update the model definition to have the Children property show on the data property?

scottjmurphy
7 May 2012, 1:37 PM
Nevermind, I missed the parenthesis when accessing the collection.

To summarize, this worked perfectly:

record.Children()

This also worked, but using the .raw property is probably not recommended:

record.raw.Children

This didn't work and is what I was originally trying to do:

record.data.Children

Thanks again!

Connall
17 May 2012, 9:53 AM
hi

Can you share your code please?

Thanx

scottjmurphy
17 May 2012, 3:41 PM
Just combine my original post with vietits' and you will have the code I used.

gskluzacek
28 Oct 2013, 9:55 AM
One thing that I didn't know, and don't know if the API docs specifically calls this out, but whatever name you give to the Has Many Association must also be the name of the json property that contains the related data.

For example here is some sample json you could put in a file and have read in that will work with the Ext.JS code given above:


{
"success":true,
"total":2,
"data":[
{
"id":1,
"name":"bob",
"Children":[
{
"id":2,
"name":"bobby jr 1"
},{
"id":3,
"name":"roberta 2"
},{
"id":31,
"name":"martin 3"
},{
"id":32,
"name":"julia 4"
},{
"id":33,
"name":"keith 5"
},{
"id":34,
"name":"brenda 6"
}
]
},{
"id":4,
"name":"george",
"Children":[
{
"id":5,
"name":"georgie jr 1"
},{
"id":6,
"name":"georgetta 2"
},{
"id":61,
"name":"gene 3"
},{
"id":62,
"name":"greg 4"
},{
"id":63,
"name":"gail 5"
},{
"id":64,
"name":"garett 6"
},{
"id":65,
"name":"gaberielle 7"
},{
"id":66,
"name":"gabriel "
}
]
}
],
"message":null
}


If I had used 'children' with a lower case 'c' instead of upper case 'C', the data for the children records would not be returned.