Khush
Khush

Reputation: 877

Nested List not loading in sencha

I am trying to load a Nested list onto my Sencha app. The problem is I am not familiar with it and i am not sure if the json file i am using is correct.

[
    {
        "text":[


            {
                "text":"1.1.1",
                "leaf":true

            }],
        "text":[

            {
                "text":"1.1.1",
                "leaf":true

            }
        ]


    }
]

This is my store code

//Defining the store for the Nested List
Ext.define('InfoImage.store.nestedListStore', {
    extend: 'Ext.data.TreeStore',
    requires: 'InfoImage.model.nestedListModel',
    id:'nestedListStore',
    config:{

        //Calling the required model for the Work Item List
        model : 'InfoImage.model.nestedListModel',
        //Defining the proxy for the Work Item List to pull the data for the List
        proxy : {
            type : 'ajax',
            url : 'app/model/data/list.json',
            reader: {
                type: 'json',
                root: 'items'

            }
        },
        autoLoad: true


    }
});

and my main code is

Ext.define("InfoImage.view.nestedList", {
    extend:'Ext.NestedList',
    xtype:'nestedList',
    id:'nestedList',

    config:{
        fullscreen:'true',
        title:'Nested List',
        xtype:'nestedList',
        //displayField : 'text',
        html:'Nested List on its way!!!',
        store:'nestedListStore'
        //itemTpl:'{text}'
    }
});

The output thats displayed is [object object]. I dont know what is missing. ANy help is appreciated.

Upvotes: 0

Views: 1234

Answers (2)

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

It seems that your JSON cannot work with Ext.NestedList because text is a field of your Model and it should not be declared as rootProperty in your JSON file.

Firstly, assume that you have this model definition:

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text']
    }
});

According to your data, your JSON file should look like this:

items: [
{
    text: '1.1',
    items: [
    { text: '1.1.1', leaf: true },
    { text: '1.1.2', leaf: true }
    ]
    }
]

You have to add this config to your Store as well defaultRootProperty: 'items'

Upvotes: 0

Saurabh Gokhale
Saurabh Gokhale

Reputation: 46395

Firstly, your Json is a VALID json. Always check for valid json by pasting the json on jsonlint.com

Secondly, I see that you have commented out the

displayField:'text' 

property. If you don't provide the displayField to the nestedlist, it won't come to know, which items from the data store to show in the list.

Probably, that's why you are getting the [object Object] as your o/p in the list.

Uncomment the above line and check.

Upvotes: 1

Related Questions