PDA

View Full Version : Issues with populating simple nexted json data into grid



Kosha
27 Aug 2012, 7:00 AM
Hi,
I'm facing issues with populating nested json data into grids. I have two grids. The main grid loads json data from file using Ajax Proxy. On select of a specific record in the main grid, some additional information stored in the same json object should be displayed in the second grid.
ExtJS: 4.1.x
Here is my code.
Main Grid Data Model: AuditData


Ext.define('MyApp.model.AuditData', {
extend: 'Ext.data.Model',
fields: [
{
name: 'userId',
type: 'string'
},
{
name: 'updDateTime',
type: 'string'
},
{
name: 'id'
},
{
name: 'primaryKey'
},
{
mapping: 'entityEnum.name',
name: 'name'
},
{
name: 'auditPropertyResults'
}
]
});

Main Data Store: AuditHistoryStore


Ext.define('MyApp.store.AuditHistoryStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.AuditData'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'MyJsonStore',
model: 'MyApp.model.AuditData',
proxy: {
type: 'ajax',
url: 'data/audit.json',
reader: {
type: 'json'
}
}
}, cfg)]);
}
});


Second Grid Data Model:


Ext.define('MyApp.model.AuditPropertyResultData', {
extend: 'Ext.data.Model',
fields: [
{
name: 'valueOld',
type: 'string'
},
{
mapping: 'valueNew',
name: 'valueNew',
type: 'string'
},
{
mapping: auditColumn.tableName',
name: 'auditColumn',
type: 'auto'
}
]
});


Second Grid Store: AuditPropertyResultsStore


Ext.define('MyApp.store.AuditPropertyResultsStore', {
extend: 'Ext.data.Store',
requires: [
'MyApp.model.AuditPropertyResultData'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: false,
autoSync: true,
storeId: 'MyJsonStore2',
model: 'MyApp.model.AuditPropertyResultData',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'auditPropertyResults'
}
}
}, cfg)]);
}
});


On select of a record in main grid, loading the second store.


var auditPropertResultsPanel = this.child('#auditPropertResultsPanel');
var auditPropertyResultsData = record.get('auditPropertyResults');
auditPropertResultsPanel.store.loadData(auditPropertyResultsData);
alert(Ext.encode(record.data));

audit.json


[
{
"userId": "abc",
"updDateTime": "08-23-2012",
"id": 1,
"primaryKey": 9434,
"entityEnum": {
"id": 1,
"name": "Form"
},
"auditPropertyResults": [
{
"auditColumn": {
"fieldName": null,
"tableColumnName": "address1",
"id": 3,
"tableName": "co_client"
},
"valueOld": "Old",
"valueNew": "New"
},

{
"auditColumn": {
"fieldName": null,
"tableColumnName": "address2",
"id": 4,
"tableName": "co_client"
},
"valueOld": "Old2",
"valueNew": "New2"
}
]
},
{
"userId": "def",
"updDateTime": "08-23-2012",
"id": 2,
"primaryKey": 9434,
"entityEnum": {
"id": 1,
"name": "Form"
},
"auditPropertyResults": [
{
"auditColumn": {
"fieldName": null,
"tableColumnName": "address1",
"id": 3,
"tableName": "co_client"
},
"valueOld": "Old3",
"valueNew": "New3"
}
]
}
]


38279
For tableName in second grid, i am getting [object, object] displayed instead of co_client.When i print out the data using alert, it's in the correct format.
Any help will be appricated.
Thanks.

aconran
27 Aug 2012, 8:13 AM
It looks like you're missing a mapping to auditColumn.tableName. Have you put a field in with a mapping like that? What is the dataIndex of the column with the text "TableName"?

Kosha
27 Aug 2012, 8:30 AM
Hi,
This is my model and how it is mapped in the store.

Ext.define('MyApp.model.AuditPropertyResultData', {
extend: 'Ext.data.Model',
fields: [
{
name: 'valueOld',
type: 'string'
},
{
mapping: 'valueNew',
name: 'valueNew',
type: 'string'
},
{
mapping: 'auditColumn.tableName',
name: 'auditColumn',
type: 'auto'
}
]
});

View

{
xtype: 'gridpanel',
flex: 1,
itemId: 'auditPropertResultsPanel',
title: 'My Grid Panel',
store: 'AuditPropertyResultsStore',
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'valueOld',
text: 'ValueOld'
},
{
xtype: 'gridcolumn',
dataIndex: 'valueNew',
text: 'ValueNew'
},
{
xtype: 'gridcolumn',
dataIndex: 'auditColumn',
text: 'TableName'
}
],
listeners: {
select: {
fn: me.onAuditPropertResultsPanelSelect,
scope: me
}
}
}


Thanks

aconran
27 Aug 2012, 10:12 AM
hrm, get the contents of one of those records and see where the mapping is going bad; it looks good to me.