2013-05-31 24 views
5

我想要通过服务器提供了使用数据的购物类别的嵌套列表,它看起来是这样的:重新格式化JSON数据放入树店

{ 
    "status":{"statusCode":15001}, 
    "data":[ 
     {"itemId":1, "name":"Men", "subCategories":[ 
      {"itemId":2, "name":"Clothes", "subCategories":[ 
       {"itemId":3, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":4, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":5, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]}, 
      {"itemId":6, "name":"Accessories", "subCategories":[ 
       {"itemId":7, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":8, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":9, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]} 
     ]}, 
     {"itemId":10, "name":"Women", "subCategories":[ 
      {"itemId":11, "name":"Clothes", "subCategories":[ 
       {"itemId":12, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":13, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":14, "name":"Ethnic", "leaf":true,"subCategories":[]} 
      ]}, 
      {"itemId":15, "name":"Shoes", "subCategories":[ 
       {"itemId":16, "name":"Hells", "leaf":true,"subCategories":[]}, 
       {"itemId":17, "name":"Wedges", "leaf":true,"subCategories":[]}, 
       {"itemId":18, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]} 
     ]} 
    ] 
} 

由于树结构被包裹在data元素和儿童包裹在subCategories标签,其是从data不同所以想直接通过使响应这样预先处理该数据,使得它可以通过Nested List使用:

{ 
    "categories":[ 
     {"itemId":1, "name":"Men", "categories":[ 
      {"itemId":2, "name":"Clothes", "categories":[ 
       {"itemId":3, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":4, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":5, "name":"Sports", "leaf":true,"categories":[]} 
      ]}, 
      {"itemId":6, "name":"Accessories", "categories":[ 
       {"itemId":7, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":8, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":9, "name":"Sports", "leaf":true,"categories":[]} 
      ]} 
     ]}, 
     {"itemId":10, "name":"Women", "categories":[ 
      {"itemId":11, "name":"Clothes", "categories":[ 
       {"itemId":12, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":13, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":14, "name":"Ethnic", "leaf":true,"categories":[]} 
      ]}, 
      {"itemId":15, "name":"Shoes", "categories":[ 
       {"itemId":16, "name":"Hells", "leaf":true,"categories":[]}, 
       {"itemId":17, "name":"Wedges", "leaf":true,"categories":[]}, 
       {"itemId":18, "name":"Sports", "leaf":true,"categories":[]} 
      ]} 
     ]} 
    ] 
} 

˚F或者这是我重写getResponseData的阅读器,但这种方法永远不会被调用,并没有记录加载存储。我究竟做错了什么?

这里是我的商店:

Ext.define('MyTabApp.store.CategoriesStore',{ 
    extend:'Ext.data.TreeStore', 
    config:{ 
     model : 'MyTabApp.model.Category', 
     autoLoad: false, 
     storeId : 'categoriesStore', 
     proxy: { 
      type: 'ajax', 
      url: Properties.CONFIG_SERVICE_BASE_URL+'topnav/getall', 
      reader: { 
       type: 'json', 
       getResponseData: function(response) { 
        console.log("in getResponseData"); // Never logged in console 
        var rText = response.responseText; 
        var processed = Helper.replaceAll("data","categories",rText); 
        processed = Helper.replaceAll("subCategories","categories",processed); 
        var respObj = Ext.JSON.decode(processed); 
        return respObj.categories; 
       } 
      } 
     }, 
     listeners:{ 
      load: function(me, records, successful, operation, eOpts){ 
       console.log("categories tree loaded"); 
       console.log(records); // This prints blank array 
      } 
     } 
    } 
}); 

这里是模型:

Ext.define('MyTabApp.model.Category', { 
    extend : 'Ext.data.Model', 
    config : { 
     idProperty : 'itemId', 
     fields  : [ 
      {name : 'itemId',type : 'int'}, 
      {name : 'name',type : 'string'} 
     ] 
    } 
}); 

这是列表:

Ext.define('MyTabApp.view.CategoriesList', { 
    extend: 'Ext.dataview.NestedList', 
    alias : 'widget.categorieslist', 
    config: { 
     height    : '100%', 
     title    : 'Categories', 
     displayField  : 'name', 
     useTitleAsBackText : true, 
     style    : 'background-color:#999 !important; font-size:75%', 
     styleHtmlContent : true, 
     listConfig: { 
      itemHeight: 47, 
      itemTpl : '<div class="nestedlist-item"><div style="position:absolute; left:10px; top:10px; color:#222; font-size:130%">{name}</div></div>', 
      height : "100%" 
     } 
    }, 
    initialize : function() { 
     this.callParent(); 
     var me = this; 

     var catStore = Ext.create('MyTabApp.store.CategoriesStore'); 
     catStore.load(); 
     me.setStore(catStore); 
    } 
}); 

什么是处理&格式接收数据的最佳实践如果它不是我们想要的格式,我们无法控制服务?

+0

将更换JavaScript对象中的按键的目的是什么?你难道不能应付他们吗? –

+0

我正尝试将'data'&'subCategories'字符串更改为'categories',以便当它被解析时加载到树存储中时,我的嵌套列表将理解数据,因为所有父名和子名都相同。请检查我的另一个问题,这也是相关http://stackoverflow.com/questions/16854839/how-to-specify-rootproperty-for-nested-data-if-it-is-one-level-below – ThinkFloyd

+0

基本上我是以某种其他格式获取数据,这与[示例](http://docs.sencha.com/touch/2.1.1/#!/guide/nested_list)中使用的数据不同,其中'items'是所有数组的名称水平。所以我想改变我收到的数据,并在它被加载到商店之前就这样做。 – ThinkFloyd

回答

0

我不认为你可以附加getResponseData读者的配置。在过去,我使用了以下方法。

  1. 创建如下所示的Ext.data.reader.Json覆盖。但缺点是,这将被称为所有使用json reader的代理。然后在应用程序的require部分中添加YourApp.override.data.reader.Json。

    Ext.define('YourApp.override.data.reader.Json', { override: 'Ext.data.reader.Json', 'getResponseData': function(response) { // your implementation here }

  2. 或者你可以做一个Ext.Ajax.request和成功处理程序解析数据你想要的方式,然后在你的存储设置的数据。您也可以在商店的“刷新”事件或“前加载”事件中编写此代码,并返回false以取消该操作。