0

我是 sencha touch 和我们应用程序的新手。我有一个场景，比如我得到了 json 响应，如下面的示例 json 响应所示。现在我想将菜单项显示为列表的标题，将子菜单项显示为列表内容。

这是我的json回复：

{
   "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":
           [
           ]
       }
   ]
}

列表应该是这样的：

  • 时间标头
    • 时间1
    • 时间2
    • 时间3
  • 日期 - 标题
    • 日期1
  • 月头
    • 第 1 个月
    • 第 2 个月
    • 第 3 个月
  • 年份 - 标题

拜托，谁能帮我学习如何在煎茶触摸中做到这一点？

4

2 回答 2

0

如果您想将此显示为交互式列表，您应该查看嵌套列表

如果您只想将其显示为无序列表，您可以record.raw在加载此数据后访问并遍历它以生成您想要的任何 html。在循环之后，您可以panel.setHtml(yourHtml)在任何您想要的面板中显示它。

于 2013-03-04T13:55:11.930 回答
0

只有当您控制了 json 应用程序正在接收时，才有一种简单的方法可以做到这一点。如果您可以将 json 更改为以下形式，那么无需太多努力即可将其放入所需的显示中会容易得多。

json 可以是 -

       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"
            }
        ]

使用上面的 json，您可以使用以下内容创建模型 -

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

接下来，您可以定义一个将读取 json 的存储。您需要grouper向该商店申请将menuitems匹配某些值的组合在一起。

    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');
            }
        }
    });

这将让您自动生成标记，以将列表标题显示为父菜单项。所有子项都将作为列表项。在此之后，您只需将商店应用到列表。

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

您也可以考虑使用NestedList。这将为您提供菜单项的独特分类功能。但是，如果您没有更改 json 的权利，则需要一些疯狂的逻辑。您想要实现的目标非常简单，但是使用您提供的 json 很难做到这一点。如果可能，请考虑更改 json。

PS。您提到的 jsongroupno对于所有项目都是相同的。这个对吗 ？

于 2013-03-04T11:04:25.077 回答