PDA

View Full Version : JSON won't load in Ext.data.TreeStore



TDeBailleul
27 Oct 2011, 5:10 PM
Hi everyone,

I'm having a problem as I am trying to populate a nested list with JSON data.
It works perfectly on Safary both on my Macbook and the iOS Simulator but doesn't work anymore when I try to run it as an application.

Did anyone have the same problem ?

myput
27 Oct 2011, 11:22 PM
Hum, i think, try to check the JSON path if it's a file.
Else, i think, i had the same problem in my list, it's maybe because you must add: layout: 'fit'.

TDeBailleul
27 Oct 2011, 11:24 PM
How do I check the JSON file's path ?
I'll try to add layout : 'fit' asap hoping it'll work.
Thanks

myput
27 Oct 2011, 11:27 PM
Just see if you work with localhost , you must write:
http://localhost:8888/app/views ... ot something like that, the complete path until the file.

but i think it's the layout, or a problem of fullscreen: true in the code

Hope this helps

TDeBailleul
27 Oct 2011, 11:33 PM
Ok, I'll look in that way. Thanks of your help. I'll get back to you asap.

TDeBailleul
27 Oct 2011, 11:58 PM
Ok, I just found out that if I put all the data in my store file as a variable and then if I call it with root: data, it shows my items. But it still does not work when I call my local JSON file.

myput
28 Oct 2011, 12:21 AM
can you show me the code please?

TDeBailleul
28 Oct 2011, 12:28 AM
Here it is

app/views/Viewport.js



nestedList = Ext.extend(Ext.NestedList, {
fullscreen: true,
title: 'Music',
displayField: 'text',
store: store
});


app/models/model_actu.js



Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});


app/stores/store_actu.js



var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
},{
text: 'Still',
leaf: true
}]
},{
text: 'Coffee',
leaf: true
},{
text: 'Espresso',
leaf: true
},{
text: 'Redbull',
leaf: true
},{
text: 'Coke',
leaf: true
},{
text: 'Diet Coke',
leaf: true
}]
},{
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
},{
text: 'Lemon',
leaf: true
}]
},{
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
},{
text: 'Pretzels',
leaf: true
},{
text: 'Wasabi Peas',
leaf: true
}]
},{
text: 'Empty Category',
items: []
}]
};


var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'json',
root: 'items'
}
}
});


index.js



Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function(){
nestedList = new nestedList();
}
});



Note : It shows my items but nothing happen when I tap on them.

myput
28 Oct 2011, 12:47 AM
hum, already, i think it's not very nice to do the nestedlist in the viewport. Better to add a panel in the viewport who call the nestedlist panel. But it's just an advice. :)

After, in your store:




reader: { type: 'json', root: 'items' } Try to do:



reader: { type: 'tree', root: 'items' }and try:




this.nestedList = new nestedList();
but it's better to call this.viewport , do a viewport view, and put your nestedlist like an item ....

TDeBailleul
28 Oct 2011, 1:04 AM
I managed to make the items tapable, by changing the proxy type from json to tree like you said.
But it still doesn't work when it calls a JSON file.

Thanks for your advices though, I'll try to use them.

myput
28 Oct 2011, 1:14 AM
Try to look for this page:
https://github.com/nelstrom/Sencha-Touch-nested-list-demo

When you want to call a JSON file, you must do in your store:





var store = new Ext.data.Store({
model: 'YOUR MODEL',

proxy: {
type: 'ajax',
url : 'PATH FOR YOUR FILE/FILENAME.json',
reader: {
type: 'json'
}
}
});

Hope this helps :)

TDeBailleul
28 Oct 2011, 1:18 AM
This is exactly what I'm doing, but it only works on Safari (Mac or iPhone) and not as an app.

myput
28 Oct 2011, 1:25 AM
Maybe because you work in localhost on your computer? and in the real iphone not .. no?
I think, it's paths of your file who don't works because it's strange if this works in computer localhost or simulator ...

TDeBailleul
28 Oct 2011, 3:00 AM
Ok, Now I have the same structure as the example on the git repository.
I've just changed the value of the url parameter in the store to :



url: 'http://localhost:8888/NestedPanel/www/catalogue.json',


This works in Safari on my mac, but doesn't on the Simulator (Safari or built app)

But if I go to that URL : http://localhost:8888/NestedPanel/www/catalogue.json I can read the JSON file. So it can access the file but cannot retrieve it and I still can't figure out why.