PDA

View Full Version : Problem with associated data



bizcasfri
5 Dec 2011, 7:44 AM
I am currently evaluating extjs 4 for use with a project in development. My problem is that I have a model set up with a hasMany relationship. Here is the model(s):




Ext.define('LightSaber.model.ChargeBackReport', {
extend: 'Ext.data.Model',
fields: [
{ name: 'ReportName', type: 'string' },
{ name: 'ReportHeaderText', type: 'string' },
{ name: 'DBAName', type: 'string' },
{ name: 'NumberOfAccounts', type: 'string' },
{ name: 'NetTotal', type: 'double' },
{ name: 'EFTRefundsTotal', type: 'double' },
{ name: 'CCRefundsTotal', type: 'double' },
{ name: 'CCChargeBacksTotal', type: 'double' },
{ name: 'SummaryNumberOfAccounts', type: 'int' },
{ name: 'TransactionTotal', type: 'double' } ],
hasMany: [
{ model: 'ChargebackDetails', name: 'Records' }
]});

Ext.define('LightSaber.model.ChargeBackDetails', {
extend: 'Ext.data.Model',
fields: [
{ name: 'CustomerID', type: 'string' },
{ name: 'CustomerName', type: 'string' },
{ name: 'MemberType', type: 'string' },
{ name: 'TransactionDate', type: 'date', dateFormat: 'MS' },
{ name: 'TransactionCode', type: 'string' },
{ name: 'TransactionAmount', type: 'double' } ],
belongsTo: 'LightSaber.model.ChargeBackReport'});



My store code is:



Ext.define('LightSaber.store.ChargeBackReport', {
extend: 'Ext.data.Store',
storeId: 'chargebackstore',
requires: 'LightSaber.model.ChargeBackReport',
model: 'LightSaber.model.ChargeBackReport',
proxy: {
type: 'ajax',
url: '/lightsaberapi/v1/FinancialReport/BuildChargeBackReport',
headers: { 'Content-type': 'application/json' },
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
} }});



I have a view that contains multiple grids and a header. At this point I am trying to populate the summary and details grids in the view. The summary grid uses the parent model and the details uses the hasMany side of the model. My call to populate the store is successful and the returned data is correct. The Summary grid populates fine. The details grid never populates.

Here is the view code:

Summary Grid:



Ext.define('LightSaber.view.reports.financialreports.ChargeBackSummary', {
extend: 'Ext.grid.Panel',
title: 'Charge Back Summary',
alias: 'widget.chargebacksummary',
store: 'ChargeBackReport',
height: 100,
layout: 'fit',
initComponent: function () {
this.columns = [
{ header: 'EFT Refund Total', dataIndex: 'EFTRefundsTotal', flex: 1 },
{ header: 'Credit Card Refund Total', dataIndex: 'CCRefundsTotal', flex: 1 },
{ header: 'Credit Card Charge Back Total', dataIndex: 'CCChargeBacksTotal', flex: 1 }, { header: 'Number Of Accounts', dataIndex: 'NumberOfAccounts', flex: 1 },
{ header: 'Transaction Total', dataIndex: 'TransactionTotal', flex: 1 }
];
this.callParent(arguments);
}});



Details Grid:



Ext.define('LightSaber.view.reports.financialreports.ChargeBackRecords', {
extend: 'Ext.grid.Panel',
title: 'Charge Back Details',
alias: 'widget.chargebackrecords',
layout: 'fit',
store: 'ChargeBackReport',
initComponent: function () {
this.columns = [
{ header: 'Customer Number', dataIndex: 'CustomerID', flex: 1 },
{ header: 'Customer Name', dataIndex: 'CustomerName', flex: 1 },
{ header: 'Member Type', dataIndex: 'MemberType', flex: 1 },
{ header: 'Date', dataIndex: 'TransactionDate', flex: 1 },
{ header: 'Code', dataIndex: 'TransactionCode', flex: 1 },
{ header: 'Amount', dataIndex: 'TransactionAmount', flex: 1 }
]; this.callParent(arguments);
}});



Main view containing both the grids above:




Ext.require([ 'LightSaber.view.reports.financialreports.ChargeBackRecords', 'LightSaber.view.reports.financialreports.ChargeBackSummary', 'LightSaber.view.reports.financialreports.ChargeBackHeader',]); Ext.define('LightSaber.view.reports.financialreports.ChargeBackReport', {
extend: 'Ext.window.Window',
alias: 'widget.chargebackreport',
store: 'ChargeBackReport',
id: 'chargebackreport',
title: 'Charge Back Report',
maximizable: true,
layout: 'border',
minimizable: true,
maximized: true,
renderTo: 'center-panel',
autoShow: true,
bodyStyle: 'padding: 5px;',
items: [
{
region: 'north',
xtype: 'chargebackheader'
},
{
region: 'center',
xtype: 'chargebackrecords'
},
{
region: 'south',
xtype: 'chargebacksummary'
}
],
init: function () { }
});



There is a header element, but at this point, I am not trying to display any data in it. It also uses the parent model (as does the summary)

Here is the JSON being returned:




CCChargeBacksTotal: -411
CCRefundsTotal: -75.5
DBAName: "ALL CLIENT LOCATIONS"
EFTRefundsTotal: 0
NetTotal: -639.5
NumberOfAccounts: 6
Records: Array[6]

0: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001966762&sid=">3001-96-6762"
CustomerName: "Young, Ashley"
MemberType: "CHARTER"
TransactionAmount: -39
TransactionCode: " href="pmttype.asp?RG10&sid=#RG10">RG10"
TransactionDate: "/Date(1295244000000)/"
__proto__: Object

1: Object
2: Object
3: Object
4: Object
5: Object



As you can see the raw data has all of the data from the hasMany side of the relationship.

Any help would be GREATLY appreciated. I have spent a full day on this issue and it is becoming VERY frustrating. I would think that something like this would be a common thing using extjs.

Thanks!

mitchellsimoens
5 Dec 2011, 8:25 AM
Does the store 'ChargeBackReport' ever load?

bizcasfri
5 Dec 2011, 8:29 AM
Yes it does load. The raw data shown in my post is what I can view using the developer tools in Chrome after the request is made

bizcasfri
5 Dec 2011, 8:31 AM
Here is the code in my controller that loads the data:



Ext.define('LightSaber.controller.reports.financialreports.ChargeBack', {
extend: 'Ext.app.Controller',
views: [ 'reports.financialreports.ChargeBackParameters',
'reports.financialreports.ChargeBackReport',
'reports.financialreports.ChargeBackRecords',
'reports.financialreports.ChargeBackSummary',
'reports.financialreports.ChargeBackHeader'
],
stores: [
'ChargeBackReport'
],
models: [
'ChargeBackReport',
'ChargeBackDetails' ],
init: function () {
this.control({
'chargebackparameters button[action=view]': {
click: this.getChargeBackReport,
scope: this
}
});
},
getChargeBackReport: function (button) {
var win = button.up('window'),
form = win.down('form'),
values = form.getValues();
win.close();
var chargeBackStore = this.getChargeBackReportStore();
chargeBackStore.load({ params: { clientId: values.clientId, monthYear: values.monthYear, multFlag: values.multFlag} });
Ext.widget('chargebackreport');
}});

bizcasfri
5 Dec 2011, 2:10 PM
I added a listener to the load of the store and after looking at the returned records, I noticed that the "data" object does not contain the associated data but the "raw" representation of the returned data does....

data property of the returned record



data: Object

CCChargeBacksTotal: -411
CCRefundsTotal: -75.5
DBAName: "ALL CLIENT LOCATIONS"
EFTRefundsTotal: 0
NetTotal: -639.5
NumberOfAccounts: "6"
ReportHeaderText: "For Period January 2011"
ReportName: "Customer Refund/Chargeback Report"
SummaryNumberOfAccounts: 6
TransactionTotal: -639.5




raw property of the returned record




raw: Object

CCChargeBacksTotal: -411
CCRefundsTotal: -75.5
DBAName: "ALL CLIENT LOCATIONS"
EFTRefundsTotal: 0
NetTotal: -639.5
NumberOfAccounts: 6
Records: Array[6]

0: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001966762&sid=">3001-96-6762"
CustomerName: "Young, Ashley"
MemberType: "CHARTER"
TransactionAmount: -39
TransactionCode: " href="pmttype.asp?RG10&sid=#RG10">RG10"
__proto__: Object

1: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001966762&sid=">3001-96-6762"
CustomerName: "Young, Ashley"
MemberType: "CHARTER"
TransactionAmount: -39
TransactionCode: " href="pmttype.asp?RG10&sid=#RG10">RG10"
__proto__: Object

2: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001967690&sid=">3001-96-7690"
CustomerName: "Deputy, Dianna"
MemberType: "CHARTER"
TransactionAmount: -219
TransactionCode: " href="pmttype.asp?JXEE&sid=#JXEE">JXEE"
__proto__: Object

3: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001967762&sid=">3001-96-7762"
CustomerName: "Burnett, Anthony"
MemberType: "2 YR GOLD"
TransactionAmount: -75
TransactionCode: " href="pmttype.asp?RG10&sid=#RG10">RG10"
__proto__: Object

4: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=3001968517&sid=">3001-96-8517"
CustomerName: "Correa, Anna"
MemberType: "CHARTER"
TransactionAmount: -75.5
TransactionCode: " href="pmttype.asp?JV&sid=#JV">JV"
__proto__: Object

5: Object

CustomerID: " href="dispatch.asp?BDLBLI_TenDigit=4329960639&sid=">4329-96-0639"
CustomerName: "Romanski, Jim"
MemberType: "CHARTER"
TransactionAmount: -192
TransactionCode: " href="pmttype.asp?JXEE&sid=#JXEE">JXEE"
__proto__: Object

length: 6
__proto__: Array[0]

ReportHeaderText: "For Period January 2011"
ReportName: "Customer Refund/Chargeback Report"
SummaryNumberOfAccounts: 6
TransactionTotal: -639.5