sencha touch 2：列出具有模型关联的人口(sencha touch 2: list population with associations in model)

 作为sencha-touch2的学习项目，我试图用来自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 

as a learning project for sencha-touch2 i'm trying to populate a store with data from https://www.hnsearch.com/api
 
i have created the model and store as follow and in the inspector view i can see that data is received and correctly mapped.
 
the problem i cannot figure out is, how to show a sencha xtype:list element with the actual result items nested in the json (Model: SearchResultItem). i tried the following, which will give me a list with ONE list item with the results in it, but i would like to have a list item for each search result.
 
models:
 
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'
    }]

}
}); 
 
store:
 
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'
    }
}
});
 
view: 
 
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();
    }
});
 
Example JSON is here http://api.thriftdb.com/api.hnsearch.com/items/_search?q=facebook&pretty_print=true

原文：https://stackoverflow.com/questions/15944441