Display nested data in a grid inside a window with extjs 4 - extjs4

Question

I have a model, a store and a grid (which will be populated with the data in the store). On clicking on a row in the grid, it opens up a window which has a testbox, a panel which intern holds another grid. My data is nested and I'm finding it difficult to pass the values to the grid. Below is my model, store and the components.
Ext.onReady(function() {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'senority', type: 'int' },
{ name: 'dep', type: 'auto' },
{ name: 'dep_id', type: 'int', mapping: 'dep.dep_id'},
{ name: 'dep_Name', type: 'string', mapping: 'dep.dep_Name'},
{ name: 'hired', type: 'string' }
]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId:'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data:[
{firstname:"Michael",
lastname:"Scott",
senority:7,
dep:[{
dep_id: 1000,
dep_Name: 'HR'
}],
hired:"01/10/2004"},
{firstname:"Dwight",
lastname:"Schrute",
senority:2,
dep:[{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired:"04/01/2004"}
]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'First Name', dataIndex: 'firstname' },
{
header: 'Button',
xtype: 'actioncolumn',
icon : 'test.png',
handler: function(grid, rowIndex, colIndex, item, e , record) {
rIx=rowIndex;
Ext.create('MyWindow',{rIx: rowIndex}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store : Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id : 'fname',
fieldLabel:'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function(){//alert("-->");
//grid inside the panel which is in window
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Department ID',
dataIndex: 'dep_id'
},
{
text: 'Department Name',
dataIndex: 'dep_Name'
}
],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function(win){
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Im trying it with mapping and Im not able to see any data in the grid inside the panel. On clicking on the first row, the text box inside the window should display firstname( which is working fine), and the grid inside the window should display department id and department name of that particular employee alone. First, i tried with hasMany and belongsTo, but of no luck. Now I'm trying with mapping. Pls help....

Answer 1

You indeed use hasMany in your mapping.
I've made a fiddle for you with your example, I changed a few stuff arround, it's working now. http://jsfiddle.net/johanhaest/UehS2/
Ext.onReady(function () {
//Model
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstname',
type: 'string'
}, {
name: 'lastname',
type: 'string'
}, {
name: 'senority',
type: 'int'
}, {
name: 'dep'
}, {
name: 'hired',
type: 'string'
}]
});
Ext.define('Department', {
extend: 'Ext.data.Model',
fields: [{
name: 'dep_id',
type: 'int'
}, {
name: 'dep_Name',
type: 'string'
}]
});
//Store
Ext.create('Ext.data.Store', {
model: 'User',
storeId: 'employeeStore',
// fields:['firstname', 'lastname', 'senority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott",
senority: 7,
dep: [{
dep_id: 1000,
dep_Name: 'HR'
}],
hired: "01/10/2004"
}, {
firstname: "Dwight",
lastname: "Schrute",
senority: 2,
dep: [{
dep_id: 1001,
dep_Name: 'Sales'
}],
hired: "04/01/2004"
}]
});
//First grid Panel
Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
},
{
header: 'Button',
xtype: 'actioncolumn',
icon: 'test.png',
handler: function (grid, rowIndex, colIndex, item, e, record) {
rIx = rowIndex;
Ext.create('MyWindow', {
rIx: rowIndex
}).show();
}
}
],
width: 500,
renderTo: Ext.getBody()
});
// Window
Ext.define('MyWindow', {
extend: 'Ext.window.Window',
store: Ext.data.StoreManager.lookup('employeeStore'),
height: 300,
width: 400,
title: 'My Window',
items: [ //testfield
{
xtype: 'textfield',
id: 'fname',
fieldLabel: 'Name'
},
//panel
{
xtype: 'panel',
id: 'wPanel',
title: 'Test',
height: 400,
listeners: {
afterrender: function (panel) { //alert("-->");
//grid inside the panel which is in window
var emplStore = Ext.data.StoreManager.lookup('employeeStore');
var win = panel.up('window');
var depStore = Ext.create('Ext.data.Store', {
model: 'Department',
data: emplStore.getAt(win.rIx).get('dep')
});
var wgrid = Ext.create('Ext.grid.Panel', {
title: 'Employee Data',
id: 'gridID1',
store: depStore,
columns: [{
text: 'Department ID',
dataIndex: 'dep_id'
}, {
text: 'Department Name',
dataIndex: 'dep_Name'
}],
width: 300,
height: 250
});
Ext.getCmp('wPanel').add(wgrid);
}
}
}
],
listeners: {
afterrender: function (win) {
//alert("idx= " + win.rIx);
var r = Ext.data.StoreManager.lookup('employeeStore').getAt(win.rIx);
var firstname = r.get('firstname');
Ext.getCmp('fname').setValue(firstname);
}
}
});
});
Note that your code can be optimised a lot, but I focused on your current prob.