Home > DeveloperSection > Articles > Nested List in Sencha Touch

Nested List in Sencha Touch


Sencha Touch Sencha Touch 
Ratings:
3 Comment(s)
 5830  View(s)
Rate this:

Nested List in Sencha Touch

In this article, I’m explaining nested list in sencha touch.

Nested list means one list inside of another list. Nested List provides a miller column interface to navigate between nested sets of data with a clean and easy to use interface.

To create a nested list in sencha touch, you have to follow some steps:

Step 1:

First create a model and named it ListModel and add one field ‘text’ through field configuration.

Ext.define('MyApp.model.ListModel', {

    extend: 'Ext.data.Model',

 

    config: {

        fields: [

            {

                name: 'text'

            }

        ]

    }

});

 

Step 2:

Next add a store which is Json Tree Store type and named it ListTreeStore add ListModel to it through model configuration and define a structure in the root configuration.

Ext.define('MyApp.store.ListTreeStore', {

    extend: 'Ext.data.TreeStore',

 

    requires: [

        'MyApp.model.ListModel'

    ],

 

    config: {

        model: 'MyApp.model.ListModel',

        storeId: 'MyJsonTreeStore',

        defaultRootProperty: 'items',

        root: {

            text: 'Groceries',

            items: [

                {

                    text: 'Drinks',

                    items: [

                        {

                            text: 'Water',

                            items: [

                                {

                                    text: 'Sparkling',

                                    leaf: true

                                },

                                {

                                    text: 'Still',

                                    leaf: true

                                }

                            ]

                        },

                        {

                            text: 'Coffee',

                            leaf: true

                        },

                        {

                            text: 'Espresso',

                            leaf: true

                        },

                        {

                            text: 'Redbull',

                            leaf: true

                        },

                        {

                            text: 'Coke',

                            leaf: true

                        },

                        {

                            text: 'Diet Coke',

                            leaf: true

                        }

                    ]

                },

                {

                    text: 'Fruit',

                    items: [

                        {

                            text: 'Bananas',

                            leaf: true

                        },

                        {

                            text: 'Lemon',

                            leaf: true

                        }

                    ]

                },

                {

                    text: 'Snacks',

                    items: [

                        {

                            text: 'Nuts',

                            leaf: true

                        },

                        {

                            text: 'Pretzels',

                            leaf: true

                        },

                        {

                            text: 'Wasabi Peas',

                            leaf: true

                        }

                    ]

                }

            ]

        },

        proxy: {

            type: 'ajax',

            reader: {

                type: 'json'

            }

        }

    }

});

 

We have used the ListTreeStore to populate our nested list though root configuration of the store. 

Step 3:

Next drag-n-drop the nested list from the toolbox and named it GroceryNestedList. Add the store to the nested list through store configuration.

Ext.define('MyApp.view.GoceryNestedList', {

    extend: 'Ext.dataview.NestedList',

 

    config: {

        fullscreen: true,

        detailCard: {

            xclass: 'MyApp.view.ListLabel'

        },

        store: 'MyJsonTreeStore',

        title: 'Groceries',

        layout: {

            animation: 'flip',

            type: 'card'

        }

    }

});

.

You can add animation to the nested list through animation configuration, we have also used a label to display a message at the detail card screen (when you tap on leaf node of nested list), add the label to the list using detailCard congifuration.

Step 4:

Add the label to the project to display a message at the detail card screen.

Ext.define('MyApp.view.ListLabel', {

    extend: 'Ext.Label',

 

    config: {

        html: 'Detail Card Screen',

        styleHtmlContent: true

    }

});

 

Output

Nested List in Sencha Touch

When you tap on the Snacks item, you will get the below screen:

Nested List in Sencha Touch

And when you tap on the Wasabi Peas, you will get a message coz that will be detail card screen:

Nested List in Sencha Touch

 


Separate detail card for separate list items

By Abhinav Sobti on   3 years ago
say i want to explain nuts, pretzels, wasabi peas in separate detail cards.. how do i do that?

Re: Separate detail card for separate list items

By Arun Singh on   3 years ago
Hi Abhinav Sobti,
Every nested list having only one detail card so you could not open a separate detail card. To perform this task you have to create separate screens for nuts, pretzels, wasabi peas etc. and after that on nested leafitemtap event, you can  set all these screens in nested list detail card for appropriate items. 

I hope it might be resolve your problem. 


NestedList

By Pallavi M N on   2 years ago
Hi,

JSON structure is 
items:[{text:"Group A",
           subitems:[{text:"Group AB"}]
           },{text:"Group B",
               subitems:[{text:"Group BA"}]
             }]
If i replace "items" with "subitems" & give "defaultRootProperty" to "subitems" in TreeStore it works well. But my problem, is JSON cannot be changed. Please let me know, is there any way to achieve ?

Don't want to miss updates? Please click the below button!

Follow MindStick