CODEWITHSUNDEEP
extjssencha-touch
Jo David
Jo David

Reputation: 1746

Sencha Touch 2.3.0 NestedList doesn't display child items when tapping but only root items

Update: Demo of the problem

I'm pretty new to Sencha Touch and am trying to get a NestedList working.

I've set up two model files, a store with an ajax proxy that loads a local json file and the view containing the NestedList.

The NestedList displays the root elements from my json file, so that's all working so far.

But when I click on one of those items, it animates the view but the resulting list is only showing the parent items again, but this time with a back button in the titlebar:

First time After clicking on an item

I really don't get what I am doing wrong here.

JSON (compact)

{
"countries":[
{"name":"Germany","countryCode":"de","cities":[
    {"name":"Berlin"},{"name":"Muenchen"}]},
{"name":"France","countryCode":"fr","cities":[
    {"name":"Paris"},{"name":"Lyon"}]},
{"name":"United Kingdom","countryCode":"uk","cities":[
    {"name":"London"},{"name":"Leicester"}]}]
}

Models

  1. City:

    Ext.define('MyApp.model.City', {
    extend: 'Ext.data.Model',
    config: {
        fields: [{ name: 'name', type: 'string' }]
    }
});

  2. Country:

    Ext.define('MyApp.model.Country', {
    extend: 'Ext.data.Model',

    require: [
        "MyApp.model.City"
    ],

    config: {
        fields: [
            { name: 'name', type: 'string' },
            { name: 'countryCode', type: 'string' }
        ],
        hasMany: [{ model: "MyApp.model.City", name: "cities" }]
    },
});

TreeStore

Ext.define('MyApp.store.CountryTreeStore', {
    extend: 'Ext.data.TreeStore',

    config: {
        autoLoad: true,
        model: "MyApp.model.Country",
        defaultRootProperty: "countries",
        proxy: {
            type: "ajax",
            url: "/data/data.json",
            reader: {
                type: "json"
            }
        }
    }
});

part from the view

items: [
    {
        xtype: 'nestedlist',
        store: "CountryTreeStore",
        displayField: "name"
    }
]

Update: Setting a breakpoint in the load event listener of the TreeStore (proxy) and inspecting the "loaded" store object shows, that it has a cities property with the correct data.

Upvotes: 0

Views: 732

Answers (2)

Phil
Phil

Reputation: 182

hm I've tried to refactor your problem. When I set the key "cities" in the json to "countries", or the same key from the previous level, it seems to work. So it's your "hasMany"-relation which is not working. I've never tried to do it this way. So when you remove the "hasMany"-relation, and change the json to this, it will work:

[{
"countries":[
{"name":"Germany","countryCode":"de","countries":[
{"name":"Berlin", leaf: true},{"name":"Muenchen", leaf: true}]},
{"name":"France","countryCode":"fr","countries":[
{"name":"Paris", leaf: true},{"name":"Lyon", leaf: true}]},
{"name":"United Kingdom","countryCode":"uk","countries":[
{"name":"London", leaf: true},{"name":"Leicester", leaf: true}]}]
}]

and with "leaf: true" you can listen to the "leafitemtap" event, to do something when you reach the end of the tree.

Where have you found the example with the "hasMany"-relation? Maybe there's just a little thing missing ;)

Upvotes: 1

Phil
Phil

Reputation: 182

have you tried to set leaf: true on the last item level? {"name":"Muenchen", "leaf": true}

Upvotes: 0

Related Questions