Question

我是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
月 - 头
- MONTH1
- MONTH2
- month3
年 - 标题

拜托，有谁可以帮我学习如何在sencha touch中做到这一点？

Answer 1

只有当您控制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。您提到的json对所有项目都具有相同的groupno。它是否正确？

Answer 2

如果您想将其显示为交互式列表，请查看Nested List

如果你想将它显示为一个无序列表，你可以在加载这些数据后访问record.raw并迭代它以生成你想要的任何html。循环之后，您可以panel.setHtml(yourHtml)在所需的任何面板中显示该内容。

Sencha Touch解析json响应并使父项成为标题

2 个答案: