Sencha Touch Parse json response and make the parent item is header

Question

I am a newbie to sencha touch and we app. I have a scenario like I am getting the json response as shown in the example json response below. now i want to display the menu item as a header of the list and the sub menu item as the list content.

here is my json response:

{
   "menuname": "menu",
   "menugroup": 0,
   "submenuitems":
   [
       {
           "menuname": "Time",
           "menugroup": 0,
           "submenuitems":
           [
               {
                   "menuname": "Time1",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               },
               {
                   "menuname": "Time2",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               },
               {
                   "menuname": "Time3",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               }
           ]
       },
       {
           "menuname": "Date",
           "menugroup": 0,
           "submenuitems":
           [
               {
                   "menuname": "Date1",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               }
           ]
       },
       {
           "menuname": "Month",
           "menugroup": 0,
           "submenuitems":
           [
               {
                   "menuname": "Month1",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               },
               {
                   "menuname": "Month2",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               },

               {
                   "menuname": "Month3",
                   "menugroup": 1,
                   "submenuitems":
                   [
                   ]
               }
           ]
       },
       {
           "menuname": "Year",
           "menugroup": 0,
           "submenuitems":
           [
           ]
       }
   ]
}

List should be like:

Time -header
- Time1
- Time2
- Time3
Date - header
- Date1
Month -header
- month1
- month2
- month3
Year - Header

Please, can anyone help me learn how to do this in sencha touch?

SachinGutte SachinGutte · Accepted Answer · 2013-03-04T11:04:25

There's an easy way to do this only if you've control over the json app is receiving. If you could change the json to following form then it'll be a lot easier to put this into required display without much efforts.

json can be -

       menuItems : [
            {
                 menuname: "Time",
                 subitem: "some time 1"
            },
            {
                 menuname: "Time",
                 subitem: "some time 2"
            },
            {
                 menuname: "Date", 
                 subitem: "some date 1"
            },
            {
                 menuname: "Date", 
                 subitem: "some date 2"
            }
        ]

With above json you can create model with something like -

    var model = Ext.define('SomeModel',{
        extend: 'Ext.data.Model',
        fields: ['menuname','subitem']
    });

Next you can define a store that will read the json. You need to apply grouper to this store to group together menuitems that matches certain values.

    var store = Ext.create("Ext.data.Store", {
        model: model,
        data : [
            {menuname: "Time", subitem: "some time 1"},
            {menuname: "Time", subitem: "some time 2"},
            {menuname: "Date", subitem: "some date 1"},
            {menuname: "Date", subitem: "some date 2"}
        ],
        groupField:'menuname',
        grouper: {
            groupFn: function(record) {
                return  record.get('menuname');
            }
        }
    });

This will let you generate markup automatically, for displaying list header as parent menu items. And all subitems will fall as list items. After this you just need to apply store to list.

    var list = Ext.create("Ext.List", {
        styleHtmlContent:true,
        fullscreen: true,
        store: store,
        grouped: true,
        itemTpl: "{subitem}"
    });

You can also consider using NestedList. This will give you a distinct categorization capability for menu items. If however, you don't hold rights to change json, you'd need some crazy logic. What you want to achieve is quite simple, but doing this is difficult with the json you've given. Consider changing json if possible.

PS. The json you've mentioned is having same groupno for all items. Is this correct ?

Sencha Touch Parse json response and make the parent item is header

2 Answers