PDA

View Full Version : try to load a nested json file and render as some panels



chimerical
15 Feb 2011, 6:35 AM
Hello sencha Forum.

i'm totally new to developing sencha touch webapps ... Im trying for one week now ^^
The docu is good and there are some answers to my problems in google
but due to this topic i couldn't find some tips.

Ok lets start. I try to load a nested json into my touch application. My
json is valid and the loading works ... here is the json code which I stored in a
separate file.



[
{
"id": 1,
"name": "testname",
"motiv": "testmotiv.jpg",
"intro": "this is a test",
"decors": [
{
"image": "testdecor.jpg",
"name": "testtest",
"expl": "this is a decor to test something",
"link": "testdecor.html"
},
]
}
]


There will be more items in it and some content ;)

Now what i want is to load each parent object as a single panel or content
for the items array and each children in a list of divs as listitem.

What I want to create is a tabnavigation with exactly as many tabs as there are parent objects in the json file.
(hope you can understand, i'm not very good to explain in english)

Heres my code to do so:


/* ************************
* json model an reader
************************ */

Ext.regModel('kollektion', {
fields: ['id', 'name','motiv','intro'],

hasMany: {model: 'decors', name: 'decors'},

proxy: {
type: 'ajax',
url : 'src/kollektion.json'
}
});

Ext.regModel('decors', {
fields: ['image', 'name','expl','link'],
});

var kollektionStore = new Ext.data.Store({
model: 'kollektion',
autoLoad: true
})

/* ************************
* build output
************************ */

kollektionStore.on('load', function(s, r){

Ext.each(r,function(rec){

//alert(rec.data.name);

var kollektion = [{
xtype: 'dataview',
tpl: [
'<tpl for=".">',
'<div class="kollektion">',
'<h1>{name}</h1>',
'<img width="100%" src="{motiv}" /><br />',
'<p>{intro}</p>',
'<div class="decorlist">',
'<tpl for="decors">',
'<div class="decor">',
'<a href="{link}">',
'<img src="{image}" class="dl-thumb" />',
'<div class="dl-title"><b>{name}</b>{expl}<br clear="all" /></div>',
'</a>',
'</div>',
'</tpl>',
'</div>',
'</div>',
'</tpl>',
],
itemSelector: 'div.kollektion',
styleHtmlContent: true,

//store: kollektionStore

store: rec
}]

panel.add(kollektion);
panel.doLayout();
});

});

/* ************************
* Mainpanel
************************ */

var panel = new Ext.Panel({
fullscreen: true,
layout:{
type: 'vbox',
align: 'strech',
pack: 'start'
},
scroll: {
direction: 'vertical',
eventTarget: 'parent'
},
//items: [kollektion]
});


with the disabled alert i checked my data and i can access but there must
be a problem to use "rec" as "store". I use the sencha debugging lib but i
get no warning or failure. Since i add panel.add() and panel.doLayout() i get
"Uncaught TypeError: Object [object Object] has no method 'isLoading'" but
don't understand.

It works without putting "kollektion" in an "each" and render it as normal
but then i get all parents and childrens of the json in the same panel. But i don't
know if there is any way to handle this as panels for a tabpanel or some other
navigation.