PDA

View Full Version : How to populate a list with the childrens of a json store



Manu_Fr
28 Aug 2011, 12:19 PM
Hey everyone!

I 'm stuck since a couple of days now on my app so I finally decided to request your help.

To be simple, I would like to do exactly the same thing than a nestedlist but without to use it. Why? Because I had so many issues to display - a list, a nested list and a footer-panel - all together, in the same container panel.

So after to tap on one of the first list item, I can't arrive to navigate through my json file to display the corresponding children content.


This is my json file :


{
"items": [
{
"text": "Activites aquatiques",
"items": [
{
"text": "Activités Subaquatiques",
"leaf": true
},
{
"text": "Aquagym",
"leaf": true
},
{
"text": "Natation",
"leaf": true
},
{
"text": "Plongée",
"leaf": true
}
],
"leaf": false
},
{
"text": "Relaxation",
"items": [
{
"text": "Sophrologie",
"leaf": true
},
{
"text": "Taï Shi",
"leaf": true
},
{
"text": "Yoga",
"leaf": true
}
],
"leaf": false
},
{
"text": "Danse",
"items": [
{
"text": "Capoeira",
"leaf": true
},
{
"text": "Danse africaine",
"leaf": true
},
{
"text": "Danse classique",
"leaf": true
},
{
"text": "Danse contemporaine",
"leaf": true
},
{
"text": "Danse Hip-hop",
"leaf": true
},
{
"text": "Danse Jazz",
"leaf": true
},
{
"text": "Salsa",
"leaf": true
},
{
"text": "Salsa, Rock, Danses de Société",
"leaf": true
},
{
"text": "Tango argentin",
"leaf": true
}
],
"leaf": false
},
{
"text": "Entretien physique",
"items": [
{
"text": "Athlétisme et cross",
"leaf": true
},
{
"text": "Gym tonic",
"leaf": true
},
{
"text": "Musculation",
"leaf": true
},
{
"text": "Triathlon Duathlon",
"leaf": true
}
],
"leaf": false
},
{
"text": "Sports collectifs",
"items": [
{
"text": "Basket",
"leaf": true
},
{
"text": "Football",
"leaf": true
},
{
"text": "Handball",
"leaf": true
},
{
"text": "Rugby",
"leaf": true
},
{
"text": "Volley-Ball",
"leaf": true
}
],
"leaf": false
},
{
"text": "Sports de raquette",
"items": [
{
"text": "Badminton",
"leaf": true
},
{
"text": "Golf",
"leaf": true
},
{
"text": "Tennis",
"leaf": true
},
{
"text": "Tennis de table",
"leaf": true
}
],
"leaf": false
},
{
"text": "Sports de combat",
"items": [
{
"text": "Aïkido",
"leaf": true
},
{
"text": "Boxe anglaise",
"leaf": true
},
{
"text": "Boxe française",
"leaf": true
},
{
"text": "Escrime",
"leaf": true
},
{
"text": "Judo",
"leaf": true
},
{
"text": "Ju-jitsu",
"leaf": true
},
{
"text": "Karaté",
"leaf": true
},
{
"text": "Taekwondo",
"leaf": true
}
],
"leaf": false
},
{
"text": "Sports nautique",
"items": [
{
"text": "Aviron",
"leaf": true
},
{
"text": "Canoë - Kayak",
"leaf": true
},
{
"text": "Surf",
"leaf": true
},
{
"text": "Voile",
"leaf": true
}
],
"leaf": false
},
{
"text": "Autres",
"items": [
{
"text": "Escalade",
"leaf": true
},
{
"text": "Gymnastique sportive",
"leaf": true
},
{
"text": "Step Basic",
"leaf": true
},
{
"text": "Randonnées pédestre",
"leaf": true
},
{
"text": "Trampoline",
"leaf": true
},
{
"text": "Ultimate / Freesbee",
"leaf": true
},
{
"text": "Cirque",
"leaf": true
}
],
"leaf": false
}
]
}


And my app that I have simplified for this thread :



var App = new Ext.Application({
name : 'SportApp',
useLoadMask : true,
launch : function (){

////////////////////////////////////////////////////////////
///////////////// STORES & MODELS //////////////////////
////////////////////////////////////////////////////////////

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

SportApp.stores.sport_store = new Ext.data.Store({
model : 'Sport',
proxy: {
type: 'ajax',
url: 'json/sports.json',
reader: {
type: 'tree',
root: 'items'
}
},
});
SportApp.stores.sport_store.load();

////////////////////////////////////////////////////////////
////////////////// FIRST SCREEN //////////////////////
////////////////////////////////////////////////////////////

SportApp.views.sportList = new Ext.List({
id : 'sport_general',
scroll: false,
store : SportApp.stores.sport_store,
itemTpl : '<div id="item_sport_general">{text}</div>',
onItemDisclosure : true,
listeners : {
itemtap : function (list,index) {
var selectedSport = SportApp.stores.sport_store.getAt(index).get('text');
SportApp.views.sportDetailToolbar.setTitle(selectedSport);
SportApp.views.viewport.setActiveItem('sportDetailContainer', {type: 'slide', direction: 'left'});
}
}
});

SportApp.views.sportListToolbar = new Ext.Toolbar({
id : 'sportListToolbar',
title : 'NANTES SUAPS',
});

SportApp.views.footer = new Ext.Panel({
html : '<div id="footer"> Application made with Sensha Touch Framework | Version 1.0</div></div>'
})

SportApp.views.sportListContainer = new Ext.Panel({
id : 'sportListContainer',
scroll: 'vertical',
layout: { type: 'vbox', align: 'stretch'},
dockedItems : [SportApp.views.sportListToolbar],
items: [SportApp.views.sportList, SportApp.views.footer]
});


////////////////////////////////////////////////////////////
////////////////// SECOND SCREEN //////////////////////
////////////////////////////////////////////////////////////

SportApp.views.detailList = new Ext.List({
id : 'sport_detail',
scroll: false,
store : SportApp.stores.sport_store,
itemTpl : '<div id="item_sport_detail">{text}</div>',
});

SportApp.views.sportDetailToolbar = new Ext.Toolbar({
id : 'sportListToolbar',
//title : 'SPORTS',
items : [{
id : 'backButton',
ui : 'back',
text : 'Back',
handler: function(){
SportApp.views.viewport.setActiveItem('sportListContainer', {type: 'slide', direction:'right'});
}
}]
});

SportApp.views.sportDetailContainer = new Ext.Panel({
id : 'sportDetailContainer',
scroll: 'vertical',
dockedItems : [SportApp.views.sportDetailToolbar],
items: [SportApp.views.detailList]
});

////////////////////////////////////////////////////////////
////////////////// MAIN VIEWPORT //////////////////////
////////////////////////////////////////////////////////////

SportApp.views.viewport = new Ext.Panel({
id: 'main_container',
fullscreen: true,
layout: 'card',
items: [SportApp.views.sportListContainer,
SportApp.views.sportDetailContainer]
});


}
});



With this code below, I can access to the name of the node but I still don't find how to get to the "items" array content corresponding :

var selectedSport = SportApp.stores.sport_store.getAt(index).get('text');

Thank you beforehand

Emmanuel
(from France)

arkos
29 Aug 2011, 3:53 AM
hi,

i am also new on senche. but what i see is, that your json-file got two "items-nodes". how can exjs know that you want to have [items][items] as root (instead of [items])?? did you try something like this:




{ "somethingelse": [ { "text": "Activites aquatiques", "items": [ { "text": "Activités Subaquatiques", "leaf": true }, { "text": "Aquagym", "leaf": true },
.....

Manu_Fr
7 Sep 2011, 5:34 PM
Thank you Arkos for your reply

With this code below, I can "navigate" now througth my json file:


NotesApp.views.sportList = new Ext.List({
cls: 'Css_MainList',
id : 'sport_general',
scroll: false,
store : sport_store,
itemTpl : '<div id="item_sport_general">{text}</div>',
onItemDisclosure : function (record, index){
alert(record.data.items[1].text);
}
});

In my list, if I tap on " Activités Aquatives" item, I can access to the relative childrens by 'record.data.items[number]' ex:
record.data.items[0] = "Activités Subaquatique"
record.data.items[1] = "Aquagym"
record.data.items[2] = "Natation"
...

So then I created a new Data.Store depending of the index item :


var items_store = null;
Ext.regModel('Sport', {
fields: [
{name : 'text', type: 'string'}
]
});

NotesApp.views.sportList = new Ext.List({
cls: 'Css_MainList',
id : 'sport_general',
scroll: false,
store : sport_store,
itemTpl : '<div id="item_sport_general">{text}</div>',
onItemDisclosure : function (record, index){
//alert(record.data.items[1].text);
items_store = new Ext.data.Store({
model: 'Sport',
autoLoad : true,
data : record.data.items
});
NotesApp.views.detailList.update();
NotesApp.views.viewport.setActiveItem('detailListContainer', {type: 'slide', direction: 'left'});
}
});

NotesApp.views.detailList = new Ext.List({
id : 'listDetail',
width : 320,
scroll: false,
store : items_store ,
itemTpl : '<div id="item_list_general">{text}</div>',
onItemDisclosure : true
});

NotesApp.views.detailListContainer = new Ext.Panel({
id : 'detailListContainer',
scroll: 'vertical',
width: 320,
layout: { type: 'vbox', align: 'stretch'},
dockedItems : [NotesApp.views.detailListToolbar],
items: [NotesApp.views.detailList]
});


It should be correct because I don't have errors in the debug consol but I don't see nothing anymore in my "ListDetail" list

What did I do wrong?

Thank you

Emmanuel