extjs - sencha touch 2：在模型中列出具有关联的人口

Question

作为 sencha-touch2 的学习项目，我正在尝试使用来自https://www.hnsearch.com/api的数据填充商店

我已经创建了模型并存储如下，在检查器视图中我可以看到数据已接收并正确映射。

我无法弄清楚的问题是，如何显示一个 sencha xtype:list 元素以及嵌套在 json 中的实际结果项（模型：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

AFAIK，如果您正在寻找要显示的项目数组，则应在商店中使用项目模型并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属性的变化