Sencha Touch解析json響應，並使父項是標題

我是sencha touch和我們的應用程序的新手。我有一個像我得到的JSON響應場景，如下面的示例json響應所示。現在我想顯示菜單項作爲列表的標題和子菜單項作爲列表內容。Sencha Touch解析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": 
      [ 
      ] 
     } 
    ] 
}

名單應該是這樣的：

時間-header
- 時間1
- 時間2
- 時間3
日期 - 頭
- 日期1
月-header
- MONTH1
- MONTH2
- month3
年 - 頁眉

請問誰能幫我學習如何在sencha touch中做到這一點？

來源

2013-03-04 Thiru

有一個簡單的方法來做到這一點，只有當你控制了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。它是否正確？

來源

2013-03-04 11:04:25 SachinGutte

沒有。我無法更改此響應格式。此外，我需要遵循上述格式，如同一頁面中的標題和子菜單。所以我也不能使用嵌套列表的概念。我所附的答覆只是正確的。菜單標題的值爲o，其項目的值爲1. – Thiru 2013-03-04 11:37:55

如果你想如果你想顯示這只是一個無序列表，你可以加載這個數據後，訪問record.raw和遍歷它來生成用於顯示此交互式列表，你應該看看Nested List

任何HTML你想。循環後，您可以執行panel.setHtml(yourHtml)以顯示您想要的任何面板。

來源

2013-03-04 13:55:11 ThinkFloyd

我想在列表中顯示它（不是嵌套列表或無序列表） – Thiru 2013-03-05 03:57:43

Sencha Touch解析json響應，並使父項是標題

回答

相關問題