PDA

View Full Version : Difficulty to load a JsonStore



Nom4d3
20 Jun 2010, 6:24 PM
I was trying to make a simple list with some data from a json, but after some time digging I still having this error:

ext-touch-debug.js:11505
Uncaught TypeError: Cannot read property 'prototype' of undefined

Anyone could help me to find what I'm doing wrong?

And another doubt: Will these stores have the load method? Because I didn't find anything on API about it.

index.js

Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
phoneStartupScreen: 'img/phone_startup.png',
icon: 'img/icon.png',
glossOnIcon: true,

onReady: function() {
Ext.regModel('myModel', {
fields: ['name', 'url']
});

var myList = new Ext.List({
tpl: '<tpl for="."><div class="time"><strong>{name}</strong> {url}</div></tpl>',
itemSelector: 'div.time',
singleSelect: true,
store: new Ext.data.JsonStore({
url: 'data.json',
proxy: {
model: 'myModel',
type: 'ajax',
reader: {
type: 'json',
root: 'images'
}
}
})
});

console.info(myList.store);

function test(){ alert('X'); }
new Ext.Panel({
id: 'toolbartxt',
items: [ myList ],
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
ui: 'light',
items: [{
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: 'Test 1',
handler: test
}, {
text: 'Test 2',
handler: test
}]
}],
dock: 'top'
}
});
}
});


data.json

{
images: [
{name: 'Image one', url:'/GetImage.php?id=1'},
{name: 'Image Two', url:'/GetImage.php?id=2'}
]
}

PS: I'm testing on Google Chrome.

Thanks in advanced!

TommyMaintz
20 Jun 2010, 10:58 PM
I'm not sure if this is the problem, but it looks like you defined the model on the proxy instead of the store.

dombroskib
21 Jun 2010, 3:18 AM
Take a look at this thread
http://www.sencha.com/forum/showthread.php?102006-Stores-and-Models

Nom4d3
21 Jun 2010, 4:16 AM
Sorry about the Model inside the Proxy. It was a test and I forgot to back to the right place. (that's a problem to try to code after drink ehehe)

After fix that and put the elmasse's override, I don't have more errors. With autoLoad:true, the store is loading. I can see the data.json request on Chrome Console. But my List still without data.

It's a little hard to debug without the 'load' event, but it seens the store is not mapping the data.

Here's my updated code:


//* *//

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, {
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);

//* *//

Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
phoneStartupScreen: 'img/phone_startup.png',
icon: 'img/icon.png',
glossOnIcon: true,

onReady: function() {
Ext.regModel('myModel', {
fields: ['name', 'url']
});

var myList = new Ext.List({
tpl: '<tpl for="."><div class="time"><strong>{name}</strong> {url}</div></tpl>',
itemSelector: 'div.time',
singleSelect: true,
store: new Ext.data.JsonStore({
autoLoad: true,
url: 'data.json',
model: 'myModel',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'images'
}
}
})
});

function test(){ alert('X'); }
new Ext.Panel({
id: 'toolbartxt',
items: [ myList ],
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
ui: 'light',
items: [{
xtype: 'splitbutton',
activeButton: 0,
items: [{
text: 'Test 1',
handler: test
}, {
text: 'Test 2',
handler: test
}]
}],
dock: 'top'
}
});

(function(){
console.info(myList.store);
}).defer(1000);
}
});

Ideas?!

JimHunt
23 Jun 2010, 12:39 AM
Hi.

I'm completely new to ExtJS and Sencha Touch so I'm probably missing something really obvious, but I'm also having a problem loading Json with a JsonStore.

Following a few different examples but the seemed to differ quite a lot, many that I found didn't use the proxy, but they all gave me errors around either the model, prototype, or proxy.setModel not being available. Is there a clear example for Sencha Touch 0.9 that you guys can point me to?

I'm currently trying the following:



Ext.regModel('Customer', {
fields: ['first_name', 'last_name']
});

var ds = new Ext.data.Store({
url: '/service/overview',
model: 'Customer',
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'Customers'
}
}
});


And I get this error:

TypeError: Result of expression 'this.proxy.setModel' [undefined] is not a function.

I bet there's something really simple I'm missing, if anyone can set me straight that'd be fantastic.

Cheers, Jim.

Nom4d3
23 Jun 2010, 5:21 AM
And I'm still with the same problem. The store get data from the url, but doesn't have the data mapped.

:-|

journey4712
23 Jun 2010, 3:50 PM
I just started with sancha touch and extjs yesterday, and was running into the same problem. I had a few spare hours so i traced through all the javascript to determine what was going on. It seems to me that Ext.data.AjaxProxy.doRequest is creating improper values to send to Ext.Ajax.request().

Specifically doRequest sets up a config item called 'callback' that is called when the request is completed. Except as far as i can tell the only time this will be called is if the 'beforerequest' event returns false. If 'beforerequest' event returns false though the request will never be made.

When the response comes in Ext.data.Ajax.onComplete() is called. onComplete has access to the same options origionally passed into Ext.Ajax.request(). onComplete though wants an item called 'success' to be in the options, not callback.

With this debugging i put together the following:


Ext.data.AjaxProxy = Ext.extend(Ext.data.AjaxProxy, {
doRequest: function(operation, callback, scope) {
var writer = this.getWriter(),
request = writer.write(this.buildRequest(operation, callback, scope));
Ext.apply(request, {
scope : this,
callback : this.createRequestCallback(request, operation, callback, scope),
success: function(response) {
request.callback(response.options, true, response);
},
method : this.getMethod(request)
});
Ext.Ajax.request(request);
return request;
}
});
Ext.regModel('sourceVideo', {
fields: [
{name:"creationDate", type: 'int'},
{name:"id", type:'int'},
{name:"fileName", type:'string'}
]
});
var store = new Ext.data.JsonStore({
autoLoad: { addRecords: true },
id: 'source-video-store',
model:Ext.ModelMgr.types['sourceVideo'],
proxy: new Ext.data.AjaxProxy({
url:"/videos/index.php/sourceVideo/json",
method: 'GET',
disableCache: false,
reader: new Ext.data.JsonReader({
root: 'results',
model:Ext.ModelMgr.types['sourceVideo'],
})
})
});

var test = new Ext.DataPanel({
title: 'test',
cls: 'test',
itemSelector: '.sample',
scroll: 'vertical',
store: store,
tpl: [
'<tpl for=".">',
'<div class="sample">',
'<p>{fileName}</p>',
'</div>',
'</tpl>'
]
});


Is this a bug in the framework, something that hasn't caught up to the changes or are we all trying to use JsonStore improperly?
journey4712

edspencer
24 Jun 2010, 11:18 AM
The Ext.Ajax.request callback bug has been fixed in source control and will be present in the next release.

The prototype undefined bug has also been fixed, in the interim you can switch out Ext.data.JsonStore for Ext.data.Store

derMatze
26 Jun 2010, 7:19 AM
So, is there any example on how the whole process of storing data (read/store/update) could work? I'm a little bit confused after all these code snippets ;)

Nom4d3
26 Jun 2010, 7:26 AM
I'm stucked. I'm waiting for a new release to back to my studies, because without a jsonstore working, my projects are useless. All my data are in json.

edspencer Do you know when a new version come out?

mrsunshine
26 Jun 2010, 8:22 AM
Tommy wrote in a other thread maybe in the middle of july

edspencer
27 Jun 2010, 12:57 PM
The Store specialisations (JsonStore, ArrayStore and similar) were broken in the latest beta, but these really are just configuration classes. Until the next beta release you can just as easily set stores up like this:



new Ext.data.Store({
model: 'MyModel',
proxy: new Ext.data.HttpProxy({
reader: {
type: 'json',
root: 'someRoot'
}
})
})

reminder
28 Jun 2010, 5:35 AM
The Store specialisations (JsonStore, ArrayStore and similar) were broken in the latest beta, but these really are just configuration classes. Until the next beta release you can just as easily set stores up like this:



new Ext.data.Store({
model: 'MyModel',
proxy: new Ext.data.HttpProxy({
reader: {
type: 'json',
root: 'someRoot'
}
})
})


this doesnt work!

reminder
28 Jun 2010, 7:29 AM
hello

another problem with Ext.data.Store...

when removing the simple list with data store from the content panel the ext-touch-debug.js gives error on line 13938 Cannot call method "un" of null



Ext.getCmp("content_panel").removeAll(true);


any suggestion about how to avoid this...
the same error comes when trying to destroy the component...

thanx in advance

TommyMaintz
29 Jun 2010, 10:46 AM
when removing the simple list with data store from the content panel the ext-touch-debug.js gives error on line 13938 Cannot call method "un" of null

Thanks for reporting this. This is fixed and will be released later today.

orangechicken
2 Aug 2010, 4:07 PM
Hope I'm not hijacking this thread, but I'm having problems with the AjaxProxy as well. When destroy() is called during a bindStore(null) call, doRequest is called without arguments. This leads to the error "TypeError: Cannot read property 'params' of undefined" @ ext-touch-debug-w-comments.js:16487 (v0.9.1 but the stack looks the same in 0.9.2).

Any idea why, Tommy et al?