extjs - Sencha Touch 2.3.0 NestedList 在点击时不显示子项，而只显示根项

Question

更新： 问题演示

我对 Sencha Touch 很陌生，正在尝试让 Ne​​stedList 正常工作。

我设置了两个模型文件，一个带有加载本地 json 文件的 ajax 代理的存储和包含NestedList.

显示NestedList我的 json 文件中的根元素，所以到目前为止一切正常。

但是，当我单击其中一个项目时，它会为视图设置动画，但结果列表仅再次显示父项目，但这次在标题栏中有一个后退按钮：

我真的不明白我在这里做错了什么。

JSON（紧凑）

{
"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"}]}]
}

楷模

1. 城市：

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

2. 国家：

   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" }]
       },
   });
   

树店

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"
            }
        }
    }
});

视图的一部分

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

更新：在( ) 的load事件侦听器中 设置断点并检查“加载的”存储对象显示，它具有包含正确数据的属性。TreeStoreproxycities

Answer 1

嗯，我试图重构你的问题。当我将 json 中的键“城市”设置为“国家”或上一级的相同键时，它似乎有效。所以这是你的“hasMany”关系不起作用。我从来没有尝试过这样做。因此，当您删除“hasMany”关系并将json更改为此时，它将起作用：

[{
"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}]}]
}]

并且使用 "leaf: true" 你可以监听 "leafitemtap" 事件，当你到达树的末端时做一些事情。

您在哪里找到具有“hasMany”关系的示例？也许只是少了一点东西；）

Answer 2

您是否尝试leaf: true在最后一个项目级别上设置？{"name":"Muenchen", "leaf": true}