PDA

View Full Version : Problem with List and JSON Store



tubamanu
5 Jul 2010, 5:36 AM
Hi @ all,

i'm trying to implement an list, that loads its data using an jsonstore.
Loading the data from my PHP is working.
But at least my store does not contain any records. My Store and My Model is this:



initRegModel: function () {
Ext.regModel('BikeparkModel', { // book is the name of the model, this name is used in the store
idProperty: 'uuid',
fields: [
{name: 'uuid' , type: 'int'},
{name: 'bikepark' , type: 'string' }
],
});
},



initListStore: function () {
this.theListStore = new Ext.data.JsonStore({
url: 'get-bikeparks.php',
root: 'result',
model: 'BikeparkModel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'result'
}
}
});
this.theListStore.load();
},


and the response of my serverside script is this



{"result":[{"uuid":7897897,"bikepark":"Eppingen"},{"uuid":12345,"bikepark":"Leingarten"}]}

does someone see where my mistake ist?

i used store.getCount() to get the items.....


cheeeers!

bone
5 Jul 2010, 6:40 AM
1. Does the page return content-type: application/json ?

header('Content-type: application/json; charset=utf-8');

2. Have you tried adding mapping on the fields (just be sure)?

3. Try rewriting the store to use a standard Store instead


this.theListStore = new Ext.data.Store({
storeId: 'bikeparts',
model: 'BikeparkModel',
proxy: {
type: 'ajax',
url: 'get-bikeparks.php',
reader: {
type: 'json',
root: 'result'
}
}
});
this.theListStore.read();

tubamanu
5 Jul 2010, 7:07 AM
hi bone,

thx for your replay.

1. yes, my header is set to json

3. Ext.data.Store doesn't work. i'm getting an error message. i found this in the forum, so my jsonstore seems to work.


Ext.data.JsonReader.override({
buildExtractors : function() {
if (typeof this.model == 'string') {
this.model = Ext.ModelMgr.types[this.model];
}
Ext.data.JsonReader.superclass.buildExtractors.apply(this, arguments);

if (this.root) {
this.getRoot = this.createAccessor(this.root);
} else {
this.getRoot = function(root) {
return root;
};
}
}
});

Ext.data.JsonStore = Ext.extend(Ext.data.Store, {
/**
* @cfg {Ext.data.DataReader} reader @hide
*/
constructor: function(config){
if(config && config.url){
config.proxy = new Ext.data.AjaxProxy(config);
}
Ext.data.JsonStore.superclass.constructor.call(this, Ext.apply(config, {
reader: new Ext.data.JsonReader(config)
}));
}
});
Ext.reg('jsonstore', Ext.data.JsonStore);

2. what do you mean with mapping? can u explain?


cheers and thx!

tubamanu
5 Jul 2010, 10:32 PM
hi@all,

has someone implemented a working JSON Store?
Could not get it running.

For testing i added two records to my store like this


this.theListStore.add(Ext.ModelMgr.create({uuid: 4235, bikepark: 'fewfewfew'}, 'BikeparkModel'));
this.theListStore.add(Ext.ModelMgr.create({uuid: 1234, bikepark: 'blaaaa'}, 'BikeparkModel'));


then i want to add the store to my Ext.List, but the list does not show any items, why?




initListStore: function () {
this.theListStore = new Ext.data.Store({
autoLoad: false,
model: 'BikeparkModel',
sorters: 'uuid'
});

this.theListStore.add(Ext.ModelMgr.create({uuid: 4235, bikepark: 'fewfewfew'}, 'BikeparkModel'));
this.theListStore.add(Ext.ModelMgr.create({uuid: 1234, bikepark: 'blaaaa'}, 'BikeparkModel'));
//this.theListStore.sync();
},

initGroupingBase: function () {
var groupingBase = {
tpl: '<tpl for="."><div class="contact"><strong>{uuid}</strong>{bikepark}</div></tpl>',
itemSelector: 'div.contact',
singleSelect: true,
grouped: true,
indexBar: true,
store: this.theListStore
};
if (!Ext.platform.isPhone) {

new Ext.List(Ext.apply(groupingBase, {
floating: true,
width: 350,
height: 350,
centered: true,
modal: true,
hideOnMaskTap: false
})).show();
}
else {
new Ext.List(Ext.apply(groupingBase, {
fullscreen: true
}));
}

bone
6 Jul 2010, 12:41 AM
hi bone,
3. Ext.data.Store doesn't work. i'm getting an error message. i found this in the forum, so my jsonstore seems to work.

Thats incredible, mine does:



Ext.regModel('ProjectTask', {
fields: [
{ name: 'Name', mapping: 'name', type: 'string' },
{ name: 'ProjectName', mapping: 'projectname', type: 'string' },
{ name: 'DateStart', mapping: 'datestart', dateFormat: 'Y-m-d', type: 'date' },
{ name: 'DateStop', mapping: 'datestop', dateFormat: 'Y-m-d', type: 'date' }
]
});

/** omitted code blablablbaaaaaaaaa */
store: new Ext.data.Store({
storeId: 'projecttasks',
model: "ProjectTask",
proxy: {
type: 'ajax',
url: 'omittedurl.aspx',
reader: {
type: 'json',
root: 'items'
}
})

Have you tried .refresh() on the List after adding to the store?
Are you sure your List is correctly configured?
Can you verify that the store actually contains items by using .getCount() ?

tubamanu
6 Jul 2010, 2:14 AM
hey bone,

thx again for your patience. Finally i can render some items into my list :)

But my last problem is, that the index of the list is not working the right way.

I added an attachment here to see. As in list - example i needed the chars like A,B,C and the name of
the loaded data.....

thx again for your time

tubamanu
6 Jul 2010, 9:29 AM
actually i found my problem, but i do not know how to solve it

theres a problem with when creating the regModel and mapping my server-response to the store.
my Model and Store is this......

when i remove the mapping:'bikepark' everything works fine, but if i use it the application broke..

does someone see the mistake here ?



initRegModel: function () {
Ext.regModel('BikeparkModel', {
fields: [
{mapping: 'bikepark', name:'bikepark' },
{mapping: 'uuid', name: 'uuid' }
]
});
},



initListStore: function () {

this.theListStore = new Ext.data.Store({
model: 'BikeparkModel',
getGroupString: function(record) {
return (record.data.undefined)[0];
},
autoLoad: true,
proxy: {
type: 'ajax',
url: 'get-bikeparks.php',
reader: {
type: 'json',
root: 'result'
}
}
});

TommyMaintz
6 Jul 2010, 10:20 AM
What do you mean by if I use it the application broke. What type of error did it give you? Also, you only have to define mapping if the fieldname in your data is different then the one you want to use in your records. I don't see how defining it could break your app though, so that could be a potential bug.

tubamanu
6 Jul 2010, 11:11 AM
i create my fields in the initRegModel - function. I used mapping and/or names to definde my fields. but nothing helps.
I used the sencha-list example, do some changes there but nothing works.

obiously the problem is, that the data is not mapped correctly into the store.....
the error that appears is 'k.name is undefined'......


my server response is this:



{"result":[{"uuid":7897897,"bikepark":"Eppingen","id":1},{"uuid":12345,"bikepark":"Leingarten","id":2}]}

tubamanu
6 Jul 2010, 11:23 AM
finally i solved with using {name: 'uuid'} and setting the return (record.data.bikepark)[0]; to my getGroupString.

thx @ all for your help :)

TommyMaintz
6 Jul 2010, 1:37 PM
Great, glad you figured it out! :)