Extjs sencha touch 2：在模型中列出具有关联的总体

作为sencha-touch2的一个学习项目，我试图用来自

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

我无法解决的问题是，如何显示一个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.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();
    }
});

Ext.define（'senchaHackerNews.view.Search'{
扩展：“Ext.navigation.View”，
别名：“widget.hnSearch”，
xtype:'hnSearch'，
需要：['Ext.field.Search']，
初始化：函数（）{
var xtpl=new Ext.XTemplate（“{item.username}--{item.title}|
”）；
这个。添加([
{
xtype:'容器'，
标题：“搜索HN”，
布局：“vbox”，
项目：[{
xtype:“搜索字段”，
占位符：“搜索HN新闻（至少3个字符）”，
听众：{
范围:本,，
clearicontap:this.onSearchClearIconTap，
keyup:this.onSearchKeyUp
}
}, {
xtype:'列表'，
弹性：1，
itemTpl:xtpl，
商店：“hnSearchStore”，
emptyText:'没有匹配的项目'，
}]
}
]);
this.callParent（参数）；
},
onSearchKeyUp：功能（字段）{
如果（field.getValue（）！=''&&field.getValue（）.length>3）{
var store=Ext.StoreMgr.get（'hnSearchStore'）；
store.setProxy({
网址：'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如下所示

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'
        }
    }
});

---

注意

模型

和

根属性

属性的变化

谢谢，您的解决方案适合我。我现在只需要找到另一种方法来访问顶级模型的字段“hits”