Setting LocalStorage store for nested list

Question

I've created a localstorage store, and stored demo values in it following this tutorial:

http://sureshdotariya.blogspot.com/2013/03/understanding-local-storage-proxy-in.html

And it all works fine, I've viewed the store data in the resources in chrome and it is there, and when I load the page it loads fine, no errors, but it shows no data, here's my view code:

Ext.define('MyTest.view.SearchPanel', {
    extend: 'Ext.Panel',
    xtype: 'searchpanel',
    config: {
        layout: 'fit',
        items: [
        {
            xtype: 'nestedlist',
            title: 'Search Results',
            displayField: 'Name',
            store: {     
                storeId: 'UserStore',
                fields: ['Name']
            },
        }]
    }
});

What am I missing here? Can I use local storage store as the store for the nested list? And if yes then why it shows "No items found", I've added the store in app.js, I tried requiring it in this view but that did not work.

Your help is appreciated, thanks.

Answer 1

Ext.dataview.NestedList requires Ext.data.TreeStore instead of Ext.data.Store ( in the sample URL you gave ).

There are root, defaultRootProperty config required in Ext.data.TreeStore, and leaf property in items.

Of course you can set Ext.data.proxy.LocalStorage as proxy in Ext.data.TreeStore , try with these codes :

Ext.define('ListApp.model.User', {
     extend: 'Ext.data.Model',
     config: {
         fields: [{
             name: 'text',
             type: 'string'
         }]
     }
 });
Ext.define('App.store.User', {
    config: {
        model: 'ListApp.model.User',
        defaultRootProperty: 'items',
        root: data
        proxy: {
            type: 'localstorage',
            id: 'UserInfo'
       }
    }
});