PDA

View Full Version : jsonStore has jsonData, but I can't access it



tstone84
18 Nov 2010, 5:15 PM
I am new to extJS and just working my through some examples. I have a grid loaded with data from my web service and now i'm trying to pull data based on the rowSelect of the grid. I'm successfully pulling the id from the record in the grid and my service returns data to my jsonStore, but I can't access it. When I debug my load listener in firebug, I see my data in records.reader.jsonData, but when I try to access it any other way, I get 'undefined'. I've tried:
store.data.getAt(0);
records[0].data, etc.
Please help. I assume it is something simple I'm not doing.

jaisonjames
19 Nov 2010, 1:39 AM
Check if your running with local or live server

tstone84
19 Nov 2010, 4:22 AM
I'm running on a local dev box, but that shouldn't matter. My json is properly being sent to the client. I can access the data this way: records.reader.GetCustomerResult.Name
I would prefer to be using a record object though. What is the best method for dealing with single row json data returned by a web service?

Screamy
19 Nov 2010, 6:50 AM
In your Grid configuration:


listeners: {
rowclick: function(grid, rowIndex, eventObject) {
var record = grid.store.getAt(rowIndex);
var someValue = record.get('someFieldName');

// if you want JSON from the record:
var json = record.json;
}
}

tstone84
19 Nov 2010, 6:56 AM
My grid is working great. It's when I load another jsonStore based on the record clicked in the grid. This new store is to populate a form. My guess is that there is a better way to populate a form than using a store, which is probably overkill, but I'm not sure what that is.

darthwes
19 Nov 2010, 7:22 AM
Have you declared the fields on your store?

tstone84
19 Nov 2010, 7:34 AM
Here's my code:
var custRecord = new Ext.data.Record.create([{
name: 'AccountNumber',
mapping: 'AccountNumber'
},
{
name: 'CompanyName',
mapping: 'CompanyName'
},
{
name: 'CustomerId',
mapping: 'CustomerId'
},
{
name: 'FullName',
mapping: 'FullName'
},
{
name: 'ListName',
mapping: 'ListName'
},
{
name: 'Name',
mapping: 'Name'
},
{
name: 'ParentCustomerId',
mapping: 'ParentCustomerId'
}
]);

var store = new Ext.data.JsonStore({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: '/extJSExamples/QBC_CustomerJson.svc/GetCustomer',
headers: this.header || { 'Content-Type': 'application/json;charset=utf-8' },
jsonData: Ext.util.JSON.encode(params),
id: 'CustomerId',
listeners: {
exception: function(dp, type, action, options, response, arg) {
//Error Handling
mask.hide();
Ext.MessageBox.alert('Failed', response.responseText);
},
load: function(st, recs, options) {
mask.hide();
console.log(recs);

var custRec = store.getAt(0);
var nameField = Ext.getCmp('Name');
var compNameField = Ext.getCmp('companyName');
nameField.setValue(recs.reader.jsonData.GetCustomerResult.Name);
compNameField.setValue(recs.reader.jsonData.GetCustomerResult.CompanyName);

}
},
method: 'POST'
}),
root: 'GetCustomerResult',
fields: custRecord
});

Screamy
19 Nov 2010, 11:26 AM
Ah, okay. Your original post didn't mention anything about loading a form. Sorry for any confusion.

You can load a FormPanel's fields directly from a datastore Record (assuming that the field names in the store exactly match the 'name' attribute of each form field). Note that loadRecord(record) is inherited from Ext.form.BasicForm:


listeners: {
rowclick: function(grid, rowIndex, eventObject) {
Ext.getCmp('someForm').getForm().loadRecord(grid.store.getAt(rowIndex));
}
}