extjs - Sencha Touch 2 Nested list not displayed

Question

I'm trying to display NestedList with json on my hard disk, but it is not displayed. What am I doing wrong? No bugs in Chrome. (Chrome open with Applications / Google \ Chrome.app / Contents / MacOS / Google \ Chrome - allow-file-access-from-files). I get a blank screen without a single error in the console. If I comment fullscreen: true, in MyPanel.js I get clear NestedList without any data.

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:

Answer 1

You need to change NestedList config to following.

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

There is this displayField config of NestedList where you can specify which field to be used to set title and item text . By default it is set to text but you can specify it to be one of your model field. If you are overriding getItemTextTpl or getTitleTextTpl, this config will be ignored.

Plus there's listConfig config option available where you can mention itemTpl config. As json is having multiple fields with image and text nodes I assume you want to show that too.

So you can have listConfig something like following :

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

Reasons of list was not getting displayed might be-

1. Store is not loaded with proper data. ( To make sure inspect Network tab in chrome to see if Servlet.json present.
2. displayField and/or listConfig not mentioned.