煎茶觸摸2：名單人羣爲煎茶，touch2一個學習項目，在模型

Question

協會我試圖從https://www.hnsearch.com/api

用數據填充一個商店，我已經創建了模型並存儲爲跟隨，並在檢查查看我可以看到數據已收到並正確映射。

我不能弄清楚的問題是，如何顯示一個sencha xtype：list元素與嵌套在json（Model：SearchResultItem）中的實際結果項目。我嘗試了以下內容，它會給我一個帶有一個列表項的列表，其中包含結果，但是我想爲每個搜索結果列出一個列表項。

機型：

Ext.define('senchaHackerNews.model.Search', { 
extend: 'Ext.data.Model', 

config: { 
    fields: [{ 
     name: 'hits', 
     type: 'int' 
    }], 

    associations: { 
     type: 'hasMany', 
     name: 'results', 
     model: 'senchaHackerNews.model.SearchResults', 
     associationKey: 'results' 
    } 

} 
}); 


Ext.define('senchaHackerNews.model.SearchResults', { 
extend: 'Ext.data.Model', 

config: { 
    fields: [{ 
     name: 'score', 
     type: 'float' 
    }], 

    associations: { 
     type: 'hasOne', 
     name: 'item', 
     model: 'senchaHackerNews.model.SearchResultItem', 
     associationKey: 'item' 
    } 
} 
}); 


Ext.define('senchaHackerNews.model.SearchResultItem', { 
extend: 'Ext.data.Model', 

config: { 
    fields: [{ 
     name: 'username', 
     type: 'string' 
    }, { 
     name: 'title', 
     type: 'string' 
    }, { 
     name: 'points', 
     type: 'int' 
    }, { 
     name: 'url', 
     type: 'string' 
    }, { 
     name: 'domain', 
     type: 'string' 
    }] 

} 
}); 

商店：

Ext.define('senchaHackerNews.store.Search', { 
extend: 'Ext.data.Store', 
requires: ['senchaHackerNews.model.Search'], 

config: { 
    storeId: 'hnSearchStore', 
    model: 'senchaHackerNews.model.Search', 
    autoload: false, 

    proxy: { 
     type: 'jsonp', 
     // url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad', 
     reader: { 
      type: 'json', 
      rootProperty: '' 
     }, 
     callbackKey: 'callback' 
    } 
} 
}); 

視圖：

Ext.define('senchaHackerNews.view.Search', { 
    extend: 'Ext.navigation.View', 
    alias: 'widget.hnSearch', 
    xtype: 'hnSearch', 

    requires: ['Ext.field.Search'], 

    initialize: function() { 
     var xtpl = new Ext.XTemplate('<tpl for="results">{item.username} ---- {item.title} | <br></tpl>'); 

     this.add([ 

     { 
      xtype: 'container', 
      title: 'Search HN', 
      layout: 'vbox', 
      items: [{ 
       xtype: 'searchfield', 
       placeHolder: 'Search HN News (at least 3 chars)', 
       listeners: { 
        scope: this, 
        clearicontap: this.onSearchClearIconTap, 
        keyup: this.onSearchKeyUp 
       } 
      }, { 
       xtype: 'list', 
       flex: 1, 
       itemTpl: xtpl, 
       store: 'hnSearchStore', 
       emptyText: 'No Matching Items', 
      }] 
     } 

     ]); 

     this.callParent(arguments); 
    }, 


    onSearchKeyUp: function(field) { 

     if(field.getValue() != '' && field.getValue().length > 3) { 
      var store = Ext.StoreMgr.get('hnSearchStore'); 

      store.setProxy({ 
       url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q='+field.getValue() 
      }); 

      store.load(); 
     } else if(field.getValue() == '') { 
      Ext.StoreMgr.get('hnSearchStore').removeAll(); 
     } 
    }, 

    onSearchClearIconTap: function() { 
     Ext.StoreMgr.get('hnSearchStore').removeAll(); 
    } 
}); 

例JSON在這裏http://api.thriftdb.com/api.hnsearch.com/items/_search?q=facebook&pretty_print=true

Answer 1

據我所知，如果你正在尋找項目的陣列將顯示你應該使用在存儲中的項目模型和rootProperty指向項目，以便

Ext.define('senchaHackerNews.store.Search', { 
    extend: 'Ext.data.Store', 
    requires: ['senchaHackerNews.model.SearchResults'], 

    config: { 
     storeId: 'hnSearchStore', 
     model: 'senchaHackerNews.model.SearchResults', 
     autoload: false, 

     proxy: { 
      type: 'jsonp', 
      // url: 'http://api.thriftdb.com/api.hnsearch.com/items/_search?q=ipad', 
      reader: { 
       type: 'json', 
       rootProperty: 'results' 
      }, 
      callbackKey: 'callback' 
     } 
    } 
}); 

注意在model & rootProperty變化屬性