I have been working on this issue for over a week now and cannot seem to get it resolved. The webservice is returning data, which I can see, but the store is not loading it correctly. The only time I managed to display the entire response in the grid was when I created an ArrayStore and used loadRawData, although the formatting was off. Can someone please assist me in identifying why my store is not loading the data properly into the grid:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'connTime', type: 'string' },
{ name: 'userName', type: 'string' },
{ name: 'clientName', type: 'string' },
{ name: 'feedUrl', type: 'string' },
{ name: 'dconnTime', type: 'string' },
{ name: 'errMessage', type: 'string' },
{ name: 'ip', type: 'string' }
]
});
var myStore = Ext.create('Ext.data.Store', {
model: 'User'
});
Ext.Ajax.request({
url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
method: 'GET',
success: function (response, options) {
var s = response.responseText;
Ext.MessageBox.alert(s, 'WOO WOO');
myStore.loadData(s);
},
failure: function (response, options) {
Ext.MessageBox.alert('FAILED MF', 'Unable to GET');
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: myStore,
stateful: true,
stateId: 'stateGrid',
columns: [
{
text: 'Query',
width: 25,
sortable: false,
dataIndex: 'userName'
},
{
text: 'Count',
width: 5,
sortable: true,
renderer: change,
dataIndex: 'ip'
},
{
text: 'Last Updated',
width: 76,
sortable: true,
dataIndex: 'connTime'
},
{
text: 'Disconnect Time',
width: 10,
sortable: true,
renderer: change,
dataIndex: 'dconnTime'
},
{
text: 'Client',
width: 10,
sortable: true,
renderer: change,
dataIndex: 'clientName'
}
],
height: 350,
width: 800,
title: 'Active Queries',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
.....
I attempted a different approach with the following code, but did not even receive the ajax response:
var newStore = Ext.create('Ext.data.ArrayStore', {
model: 'User',
proxy: {
type: 'ajax',
url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
reader: {
type: 'json',
root: 'd',
successProperty: 'success'
},
success: function (response, options) {
var s = response.responseText;
Ext.MessageBox.alert(s, 'LA LA LA');
newStore.loadData(s);
},
failure: function (response, options) {
Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
}
}
});
EDIT:
Server Response:
{"d":{"connTime":null,"userName":"101591196589145","clientName":null,
"feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}}
The "d" root element was manually added by me and is not part of the original web response. I appended it myself:
{"connTime":null,"userName":"101591196589145","clientName":null,"feedUrl":null,
"dconnTime":null,"errMessage":null,"ip":null}}
EDIT 2:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'value', type: 'string' },
{ name: 'tag', type: 'string' }
]
});
var newStore = new Ext.data.JsonStore({
model: 'User',
proxy: {
type: 'ajax',
url: 'http://localhost:52856/WCFService/WebService1.asmx/getRules',
reader: {
type: 'json',
root: 'rules',
idProperty: 'value'
},
success: function (response, options) {
var s = response.responseText;
Ext.MessageBox.alert(s, 'LA LA LA');
newStore.loadData(s);
},
failure: function (response, options) {
Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
store: newStore,
stateful: true,
columns: [
Here is the new json format I am attempting:
{"rules":[{"value":"101591196589145","tag":"16"},
{"value":"102890809752267","tag":"16"},
{"value":"107821192690513","tag":"16"}, {"value":"111517428886211","tag":"16"},
{"value":"117389718398171","tag":"16"},{"value":"12099149051","tag":"16"},
I believe the issue lies with the ext.ajax.request call. The request is made before the store is defined, resulting in the data not being loaded. How can I overcome this?