PDA

View Full Version : Ext.data.JsonStore - String Data (Noob Question)



c.i.
4 Jan 2011, 11:39 AM
Hey Folks,

I am a new Ext JS user with a problem. I create a store Objekt


var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/portal/portlet-address',
});
store.load();

The Value of the URL looks like:

{"data":{"address":"Adresse Info 124","email":"[email protected]","telefon":"1234567"}}

How i can work after white the Values in the Store-Object? I will geht the email-value?

Thanx for the Help!

cheers,
c.i

Markj
4 Jan 2011, 12:19 PM
Well, it really depends or what you are trying to do, but a very simple way would be something like this

store.reader.jsonData.email

or something like that :)

darthwes
4 Jan 2011, 12:25 PM
var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/portal/portlet-address',
root: 'data',
fields: [{
name: "address",
type: 'string'
}, {
name: "email",
type: 'string'
}, {
name: 'telefon',
type: "string"
}],
listeners: {
load: function (st, recs, opts) {
for(var i = 0, len = recs.length; i < len; i+=1) {
var msg = recs[i].get("address");
msg += ", " + recs[i].get("email");
msg += ", " + recs[i].get("telefon");
alert(msg);
}
}
}
});
store.load();


You have to tell the store what fields to use, and the type of that field. Then you can just grab the records and use the get method to retrieve the values from that record.

c.i.
4 Jan 2011, 12:38 PM
@Markj: Thanx for the Infos. But they doesn't work.

I try to set the HTML-Value from JsonStore-Object as Value of the layout-object. But the Store-Value store.reader.jsonData and the store.reader.jsonData.email is undefined.



var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/portal/portlet-s1-address',
root: 'data'
});

store.load();

this.layout = new Ext.ux.Portlet(Object.extend(this.getDefaultConfig(),{
title: this.getName(),
iconCls: this.getIcon(),
height: 275,
layout: "fit",
html: store.reader.jsonData.email // Jsonstore Data
}));


URL-Output:

{"data":{"address":"Adresse Info 124","email":"[email protected]","telefon":"1234567"}}

I have no plan what i do wrong.

fay
4 Jan 2011, 12:51 PM
Looks at the docs for JsonStore (http://dev.sencha.com/deploy/dev/docs/?class=Ext.data.JsonStore) and you'll see that you're missing your JsonReader fields; also, you should wait for the store to be loaded before trying to use it. Look at the load event.

Something like:



var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/portal/portlet-s1-address',
root: 'data',
fields: ['address', 'email', 'telefon']
});

store.on('load', function(ds, records, options)
{
this.layout = ...
});

store.load();

fay
4 Jan 2011, 12:54 PM
Also, to access the data, use getAt() to retrieve the record, then get() to access the field's value.

rivarecords
4 Jan 2011, 12:55 PM
Wouldn't you have to say:


store.reader.jsonData.data[0].email

or


store.getAt(0).get('email')

c.i.
4 Jan 2011, 2:21 PM
Thanx for all the Inputs. But the result is the same. I think i make a mistake. I try to alert a Value, but there is none Value or Array.


var store = new Ext.data.JsonStore({
autoDestroy: true,
url: '/admin/portal/portlet-s1-address',
root: 'data',
fields: ['address', 'email', 'telefon'],
autoLoad: true
});

alert( " - " + store.reader.jsonData.data[0].email );
alert( " - " + store.getAt(0).get('email') );
store.load();
alert( " - " + store.reader.jsonData.data[0].email );
alert( " - " + store.getAt(0).get('email') );

this.layout = new Ext.ux.Portlet(Object.extend(this.getDefaultConfig(),{
title: this.getName(),
iconCls: this.getIcon(),
height: 275,
layout: "fit",
html: "T3ST" //store.reader.jsonData.data[0].email // Jsonstore Data
}));

sorry about that. but i am a Nooby.

Greats,
Chris

VinylFox
4 Jan 2011, 2:29 PM
The data needs to be returned as an array of objects.

So your data:

{"data":{"address":"Adresse Info 124","email":"[email protected]","telefon":"1234567"}}

Should be:

{"data":[{"address":"Adresse Info 124","email":"[email protected]","telefon":"1234567"}]}

Also, use fay's code in comment #4 that is using the 'load' event, yours will never ever work because the store is loaded asynchronously.

fay
4 Jan 2011, 2:36 PM
Chris,

From the docs for autoLoad:



...if autoLoad is true or an Object, this store's load (http://dev.sencha.com/deploy/dev/docs/output/Ext.data.Store.html#Ext.data.Store-load) method is automatically called after creation...


and for load:



Important: loading is asynchronous! This call will return before the new data has been loaded. To perform any post-processing where information from the load call is required, specify the callback function to be called, or use a a 'load' event handler (http://dev.sencha.com/deploy/dev/docs/output/Ext.util.Observable.html#Ext.util.Observable-listeners).


... so you can't expect the data to be *immediately* available whether you specify autoLoad or call load() - you need to add an event handler. And I'd really recommend that you do not access the data via "store.reader.jsonData.data" - use the methods (getAt, getById, etc.) provided.

Finally, I wouldn't develop/debug using alerts. Use FireFox + FireBug - it's invaluable - for a start you can double-check that your JSON is actually being loaded!! See: http://www.sencha.com/learn/Ext_FAQ_Debugging#Firefox.2FFirebug