Extjs Sencha Touch 2嵌套列表未显示

我试图在硬盘上显示带有json的NestedList，但它没有显示。我做错了什么？Chrome中没有bug。（Chrome通过

应用程序/Google\Chrome.app/Contents/MacOS/Google\Chrome打开-允许从文件访问文件

）。我在控制台上看到一个空白屏幕，没有一个错误。如果我在MyPanel.js中注释

fullscreen:true，

，我会得到没有任何数据的清晰嵌套列表

Servlet.json

{
    "stream":[{
            "post_id": "1",
            "post_type": "text",
            "post_thumb": "bla1"
        }]
}

MyPanel.js

Ext.define('MyApp.view.MyPanel', {
    extend: 'Ext.dataview.NestedList',
    alias : 'widget.MyPanel',

    config: {
        store : 'Storere',
        title: 'NestedList Example',     
        detailCard: {
            html: 'You can see detail information here!'
        } 
    } 
});

Storere.js

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

    config: {
        model: 'MyApp.model.MyModel',
        defaultRootProperty : 'stream',
        proxy: {
            type: 'ajax',
            url: '.\/app\/Servlet.json',
            reader: {
                type:         'json',
                rootProperty: 'stream'
            }
        }
    }    

});

MyModel.js

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

TheWorld.js

Ext.define('MyApp.controller.TheWorld', {
    extend : 'Ext.app.Controller',

    config: {
        profile: Ext.os.deviceType.toLowerCase(),
        control: {
            'MyPanel': {
                activate: 'onActivate',
                leafitemtap: 'onDetailDisplay'
            }
        }  

    },

    onActivate: function() {
        console.log('Main container is active');
    },

    onDetailDisplay: function(nestedList, list, index, target, record) {
        console.log('onDetailDisplay is active');
        var detailCard = nestedList.getDetailCard();
    },

    onItemTap: function(view, list, index, target, record, event) {
        console.log('Item was tapped on the Data View');
    },

    init: function() {
        console.log('Controller initialized');
    },
});

UPD:

---

您需要将

NestedList

config更改为以下内容

config: {
    store : 'Storere',
    //displayField:'post_type',
    title: 'NestedList Example',
    listConfig          : {
        itemTpl: '{post_type}'
    },
    detailCard: {
        html: 'You can see detail information here!'
    }
}

在

NestedList

的

displayField

配置中，您可以指定要用于设置标题和项目文本的字段。默认情况下，它设置为文本，但您可以将其指定为模型字段之一。如果您正在覆盖

getItemTextTpl

或

getTitleTextTpl

，此配置将被忽略

另外还有

listConfig

config选项，您可以在其中提到

itemTpl

config。由于json有多个带有图像和文本节点的字段，所以我想您也希望显示这一点

因此，您可以使用类似以下内容的

listConfig

：

    listConfig: {
        itemTpl: '<div><img src="{post_thumb}">{post_type}</div>'
    },

listConfig:{
itemTpl:“{post_type}”
},

无法显示列表的原因可能是-

存储区未加载正确的数据。（确保检查chrome中的网络选项卡，查看是否存在

Servlet.json

）

displayField

和/或

listConfig

未提及

---

你能发布完整的json吗？这是完整的json，我想用这种方式进行测试，最后json和模型会有另一个外观谢谢你快速完美的回答！它可以工作=），但我的逻辑中有一个新的错误（UPD有问题）。如果列表项在再次单击后是一个叶子，则会显示整个列表。如果您在json中为所有叶子项设置了

leaf:true

，则不会发生这种情况。非常感谢，您在理解和更正代码方面帮了我很多忙！我很高兴这对你有帮助。