extjs - sencha touch 2: モデル内の関連付けを使用して母集団を一覧表示する

Question

sencha-touch2 の学習プロジェクトとして、ストアにhttps://www.hnsearch.com/apiのデータを入力しようとしています

次のようにモデルとストアを作成しました。インスペクタ ビューで、データが受信され、正しくマッピングされていることがわかります。

私が理解できない問題は、json (モデル: SearchResultItem) にネストされた実際の結果アイテムを含む sencha xtype:list 要素を表示する方法です。私は次のことを試しました。これにより、結果が含まれる1つのリスト項目を含むリストが得られますが、検索結果ごとにリスト項目が必要です。

モデル:

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