MVC app with grid w/ json data source not working -- please help....

[jamesblld]

Hi all,

I'm a newbie to Sencha and recently created a small app that simply displays a grid that is fed from a WCF Rest service with MS Sql on the back end. When I created a small app that feeds the Grid it works but when I created an app using MVC architecture it doesn't populate the Grid. I've checked that the Json formatted data is coming through on the read via fiddler so I know the data structure is legit. Checked the folder structure in the app to make sure everything is being referenced properly. I also checked in Chrome for any errors and it checked out okay.

I'm not sure what it is, maybe I'm overlooking something simple. Anyway here's the code:

app.js


Ext.application({
name: 'ra',
appFolder: 'app',
useLoadMask: true,
controllers: ['MfgOrders'],
launch: function() {
Ext.create('Ext.container.Viewport', {
items: [
{region: 'center',
xtype: 'moquerylist',
style: 'margin: 5px auto 0px auto;'}
]
});
}
});


Controller:


Ext.define('ra.controller.MfgOrders', {
extend: 'Ext.app.Controller',
stores: ['MoList'],
models: ['MfgOrder'],
views: ['mfgorder.MoList'],

init: function() {
alert('grid is loading')
}
});


Model:


Ext.define('ra.model.MfgOrder', {
extend: 'Ext.data.Model',
fields: [
{name: 'CseCycleTime'},
{name: 'CseDisplayName'},
{name: 'CseEndDate',dateFormat: 'MS',type: 'date'},
{name: 'CseStartDate',dateFormat: 'MS',type: 'date'},
{name: 'CstCycleTime'},
{name: 'CstDisplayName'},
{name: 'CstEndDate',dateFormat: 'MS',type: 'date'},
{name: 'CstStartDate',dateFormat: 'MS',type: 'date'},
{name: 'CstWrapDate',dateFormat: 'MS',type: 'date'},
{name: 'CurrentPromiseDate',dateFormat: 'MS',type: 'date'},
{name: 'Gpmfgorderid'},
{name: 'ItemDin'},
{name: 'ItemNumber'},
{name: 'ItemSn'},
{name: 'MoStatus'},
{name: 'Stage'},
{name: 'UA'},
{name: 'WUCycleTime'},
{name: 'WUDisplayName'}
]

});


Store:


Ext.define('ra.store.MoList', {
extend: 'Ext.data.Store',
model: 'ra.model.MfgOrder',
autoload: true,

proxy: {
type: 'ajax',
url: 'http://dev02/ImsDataSrv/MoQueryService/moQry',
reader: {
type: 'json',
messageProperty: 'Message',
root: 'Data',
successProperty: 'Success',
totalProperty: 'Cnt',
record: ''
}
}
});


View:


Ext.define('ra.view.mfgorder.MoList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.moquerylist',

title: 'All MOs',
store: 'MoList',

height: 429,
width: 852,
autoScroll: true,
enableColumnHide: false,
enableColumnMove: false,
enableColumnResize: false,

scroll: 'vertical',
columnLines: true,
columns: [
{
xtype: 'gridcolumn',
id: 'mfgorder',
width: 82,
dataIndex: 'Gpmfgorderid',
editor: {
xtype: 'textfield',
allowBlank: false
},
flex: 1,
header: 'MFG Order'
},
{
xtype: 'gridcolumn',
dataIndex: 'ItemNumber',
header: 'Item #'
},
{
xtype: 'datecolumn',
width: 57,
dataIndex: 'CurrentPromiseDate',
editor: {
xtype: 'datefield'
},
flex: 1,
header: 'CPD',
format: 'm/d/y'
},
{
xtype: 'gridcolumn',
width: 28,
dataIndex: 'UA',
header: 'UA'
},
{
xtype: 'gridcolumn',
width: 68,
dataIndex: 'ItemDin',
header: 'DIN'
},
{
xtype: 'gridcolumn',
width: 80,
dataIndex: 'ItemSn',
header: 'SN'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'CseDisplayName',
header: 'CSE'
},
{
xtype: 'datecolumn',
draggable: false,
width: 57,
dataIndex: 'CseStartDate',
header: 'CSE St.',
format: 'm/d/y'
},
{
xtype: 'datecolumn',
width: 57,
dataIndex: 'CseEndDate',
header: 'CSE End',
format: 'm/d/y'
},
{
xtype: 'gridcolumn',
width: 45,
align: 'right',
dataIndex: 'CseCycleTime',
header: 'CSE Cy'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'CstDisplayName',
header: 'CST'
},
{
xtype: 'datecolumn',
width: 57,
dataIndex: 'CstStartDate',
header: 'CST St.',
format: 'm/d/y'
},
{
xtype: 'datecolumn',
width: 57,
dataIndex: 'CstEndDate',
header: 'CST End',
format: 'm/d/y'
},
{
xtype: 'gridcolumn',
width: 45,
align: 'right',
dataIndex: 'CstCycleTime',
header: 'CST'
}
]
,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
selModel: Ext.create('Ext.selection.CheckboxModel', {
allowDeselect: true,
checkOnly: true
})
});


Not sure what I'm missing here! :((

Jim :-?

[scottmartin]

In reviewing your code, please add idProperty to your model.
In chrome, are you getting the data back that you expect in the response tab?

Regards,
Scott

[jamesblld]

Hey Scott,

Thanks for the quick reply. I tried applying the id but it didn't work. Also, in Chrome everything is running fine, I'm just not receiving the data, no errors..

[scottmartin]

I'm just not receiving the data, no errors..

Right .. but are the header/response tabs just not displaying anything, or is it that the grid is just not populating?
I see you mentioned fiddler, so there is traffic. Can you provide the response?

Scott.

[jamesblld]

Hey Scott,

The grid is not populating. Wasn't sure exactly what you were looking for from fiddler. I know that when I access the wcf service url directly it does return data. But for some reason there's a disconnect between the grid and the store that's feeding it.

I attached a screen shot from fiddler when the app is running and two others as screenshots where I'm accessing the service as a direct url showing the data if it helps.

[scottmartin]

Lets cut to the chase and place some listeners on your store:



listeners: {
beforeLoad: function(store, operation){
console.log('beforeLoad');
console.log(store.data.items);
},
dataChanged: function(store){
console.log('dataChanged');
console.log(store.data.items);
},
load: function(store, records, success){
console.log('load');
console.log(store.data.items);
}
}


Scott.

[jamesblld]

Will do, let you know what happens. Thanks again!

[jamesblld]

inserted the listeners and using Chrome looked for the console response and nothing. I placed a console message in the init of the app to make sure I was getting some response to the console and it was fine but not console response from the store. Here's the modified code:


Ext.define('ra.store.MoList', {
extend: 'Ext.data.Store',
model: 'ra.model.MfgOrder',
id: "MoList",
autoload: true,

proxy: {
type: 'ajax',
url: 'http://dev02/ImsDataSrv/MoQueryService/moQry',
reader: {
type: 'json',
idProperty: 'id',
messageProperty: 'Message',
root: 'Data',
successProperty: 'Success',
totalProperty: 'Cnt',
record: ''
},
listeners: {
beforeLoad: function(store, operation){
console.log('beforeLoad');
console.log(store.data.items);
},
dataChanged: function(store){
console.log('dataChanged');
console.log(store.data.items);
},
load: function(store, records, success){
console.log('load');
console.log(store.data.items);
}
}

}
});

[scottmartin]

I will take another look.. in the meantime.. you mentioned that moving to the MVC pattern broke things. I usually define my model/proxy/store a little differently.

See if this approach helps. Mind you the code is for another table setup, but you should get the idea. If after these changes, it does not work, please send me a JSON string of a few records and I can see if I can create an
example.



Ext.define('modelProducts', {
extend: 'Ext.data.Model',
idProperty: 'idProduct',
fields: [
{ name: 'idProduct', type: 'int' },
{ name: 'productName' },
{ name: 'qty', type: 'int' },
{ name: 'rate', type: 'float' },
{ name: 'total', type: 'float' }
],
proxy: {
type: 'ajax',
actionMethods: 'POST',
api: {
read: 'list_product.php',
create: 'save_product.php',
update: 'save_product.php',
destroy: 'delete_product.php' // not in use
},
reader: {
type: 'json',
totalProperty: 'total',
successProperty: 'success',
messageProperty: 'message',
root: 'data'
},

writer: {
type: 'json',
writeAllFields: true,
allowSingle: false,
root: 'data'
},
listeners: {
/*
exception: function(proxy, response, operation){
Ext.MessageBox.show({
title: 'REMOTE EXCEPTION',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
*/
}
}
});

storeProducts = new Ext.data.Store({
autoLoad: true,
type: 'json',
model: 'modelProducts',
// pageSize: 25,
sorters: {
property: 'idProduct',
direction: 'ASC'
}
});

// grid columns
var colProducts = [
{ dataIndex: 'idProduct', header: 'ID', width: 75 },
{ dataIndex: 'productName', header: 'Name', flex: 1 },
{ dataIndex: 'qty', header: 'Qty' },
{ dataIndex: 'rate', header: 'Rate' },
{ dataIndex: 'total', header: 'Total' }
];


Scott.

[jamesblld]

Didn't work Scott. Here's a sample of the json string:

{"Cnt":79,"Data":[{"CseCycleTime":4.000000,"CseDisplayName":"R.Sale","CseEndDate":null,"CseStartDate":null,"CstCycleTime":4.000000,"CstDisplayName":"C.Dufr","CstEndDate":null,"CstStartDate":null,"CstWrapDate":null,"CurrentPromiseDate":"\/Date(1335772800000-0400)\/","Gpmfgorderid":"MFG-0030072","ItemDin":"","ItemNumber":"0-AV-9181","ItemSn":"","MoStatus":"O","Stage":"Open","UA":"Y","WUCycleTime":0.000000,"WUDisplayName":"C.Dufr","id":"MFG-0030072"},{"CseCycleTime":8.000000,"CseDisplayName":"P.Rams","CseEndDate":"\/Date(1310544000000-0400)\/","CseStartDate":"\/Date(1310112000000-0400)\/","CstCycleTime":14.000000,"CstDisplayName":"W.Vill","CstEndDate":"\/Date(1309507200000-0400)\/","CstStartDate":"\/Date(1309248000000-0400)\/","CstWrapDate":"\/Date(1310544000000-0400)\/","CurrentPromiseDate":"\/Date(1310976000000-0400)\/","Gpmfgorderid":"MFG-0031099","ItemDin":"201724","ItemNumber":"0-SG-STAC","ItemSn":"AA431102904","MoStatus":"C","Stage":"Closed","UA":"","WUCycleTime":2.000000,"WUDisplayName":"W.Vill","id":"MFG-0031099"}],"Message":"Loaded data","Success":true}

[dhiraj17]

Change the spelling of autoload in your Store to autoLoad and it should work.

[jamesblld]

That was it! Something so simple that I overlooked, feel pretty dumb8-|. Thanks for your help Scott and dhiraj17. It's much appreciated!

[dhiraj17]

You Welcome;)