问题：
过滤填充了来自商店的分层数据的 Ext.List 的推荐方法是什么？我需要过滤掉属于我选择过滤的父对象的子对象。孩子们，在这种情况下，游戏应该填充列表。
我需要的
- Ext.List 应该可以按轮次过滤，即“Omgång 1”、“Omgång 2”等。("Omgång" = "Round" in Swedish) When selecting "Omgång 1" as filter the list should only display games from that round in the list. 请参阅下面的 JSON 文档。
- 该列表应按日期（“kickOff”）分组并按“gameId”ASC 排序。
我做了什么
- 创建了一个 Ext.List，其中填充了通过 Ext.data.Store 检索的数据，该数据从通过 ReST 代理读取的 JSON 文档中获取数据。
- Ext.List 从存储 Rounds 中读取其数据（见下文）。问题是我只看到一轮“Omgång 1”的一场比赛，而应该有 8 场比赛。
这是我迄今为止所取得的成就。使用按钮过滤列表，但仅显示其中一个列表项。
EM.model.Round
圆形的模型。它与 Match 具有一对多的关系。
Ext.define('EM.model.Round', {
extend: 'Ext.data.Model',
init: function() {},
config: {
storeId: 'Rounds',
fields: [
'name',
'lockedDate',
],
associations: {
type: 'hasMany',
model: 'EM.model.Match',
primaryKey: 'gameId',
name: 'matches',
autoLoad: true,
associationKey: 'games'
}
},
});
EM.model.Match
匹配的模型。它属于圆形。
Ext.define('EM.model.Match', {
extend: 'Ext.data.Model',
init: function() {},
config: {
fields: [
{
name: 'gameId',
type: 'int'
},
{
name: 'firstTeam',
type: 'string'
},
{
name: 'firstTeamClass',
type: 'string',
convert: function(value, record) {
return util.convertFieldValueToLowerCase('firstTeam', record);
}
},
{
name: 'secondTeam',
type: 'string'
},
{
name: 'secondTeamClass',
type: 'string',
convert: function(value, record) {
return util.convertFieldValueToLowerCase('secondTeam', record);
}
},
'kickOff',
{
name: 'kickOffHour',
convert: function(value, record) {
var timestamp = new Date(util.convertUnixTimeToMilliseconds(record.get('kickOff')));
return Ext.Date.format(timestamp, 'H:i');
}
},
{
name: 'firstTeamGoals',
type: 'int',
defaultValue: 0
},
{
name: 'secondTeamGoals',
type: 'int',
defaultValue: 0
},
{
name: 'firstTeamGoalsBet',
},
{
name: 'secondTeamGoalsBet',
},
'points',
{
name: 'pointsEarned',
convert: function(value, record) {
var className = 'no-points-earned';
var points = record.get('points');
if (typeof points == 'undefined') {
return '';
}
if (points > 0) {
className = 'points-earned';
}
return '<div class="' + className + '">' + points + '</div>'
}
},
],
associations: {
type: 'belongsTo',
model: 'EM.model.Round',
name: 'round',
autoLoad: true
}
}
});
EM.store.Rounds
读取 JSON 文档的存储。然后使用该存储来填充 Ext.List。
Ext.define('EM.store.Rounds', {
extend: 'Ext.data.Store',
config: {
model: 'EM.model.Round',
storeId: 'Rounds',
filters: [{
property: 'name',
value: 'Round 1'
}],
/*grouper: {
groupFn: function (item) {
//var kickOff = new Date(util.convertUnixTimeToMilliseconds(item.get('kickOff')));
//return kickOff.format('d mmmm yyyy');
},
//sortProperty: 'kickOff'
},*/
proxy: {
type: 'rest',
url : 'resources/json/matches.json',
reader: {
type: 'json',
}
},
autoLoad: true,
}
});
JSON 文件
这是EM.store.Rounds中的代理读取的 JSON 文档。
[
{
"name": "Omgång 1",
"lockedDate": 1325420111,
"games": [
{
"gameId": 1,
"firstTeam": "Pol",
"secondTeam": "Gre",
"kickOff": 1339178400,
"firstTeamGoals": 0,
"secondTeamGoals": 3,
"firstTeamGoalsBet": 0,
"secondTeamGoalsBet": 3,
"points": 3
},
{
"gameId": 2,
"firstTeam": "Rus",
"secondTeam": "Cze",
"kickOff": 1339188300,
"firstTeamGoals": 4,
"secondTeamGoals": 1,
"firstTeamGoalsBet": 1,
"secondTeamGoalsBet": 2,
"points": 0
},{
"gameId": 3,
"firstTeam": "Ned",
"secondTeam": "Den",
"kickOff": 1339264800,
"firstTeamGoals": 2,
"secondTeamGoals": 1,
"firstTeamGoalsBet": 4,
"secondTeamGoalsBet": 2,
"points": 2
},
{
"gameId": 4,
"firstTeam": "Ger",
"secondTeam": "Por",
"firstTeamGoalsBet": 4,
"secondTeamGoalsBet": 0,
"kickOff": 1339274700
},
{
"gameId": 5,
"firstTeam": "Spa",
"secondTeam": "Ita",
"firstTeamGoalsBet": 3,
"secondTeamGoalsBet": 2,
"kickOff": 1339351200
},
{
"gameId": 6,
"firstTeam": "Irl",
"secondTeam": "Cro",
"kickOff": 1339361100
},
{
"gameId": 7,
"firstTeam": "Fra",
"secondTeam": "Eng",
"kickOff": 1339437600
},
{
"gameId": 8,
"firstTeam": "Ukr",
"secondTeam": "Swe",
"kickOff": 1339447500
}
]
},
{
"name": "Omgång 2",
"games": [
{
"gameId": 4,
"firstTeam": "Gre",
"secondTeam": "Cze",
"kickOff": 1339524000
}
]
},
{
"name": "Omgång 3",
"games": [
{
"gameId": 4,
"firstTeam": "Gre",
"secondTeam": "Rus",
"kickOff": 1339869600
}
]
},
{
"name": "Kvart",
"games": [
{
"gameId": 4,
"firstTeam": "1A",
"secondTeam": "2B",
"kickOff": 1340311500
}
]
},
{
"name": "Semi",
"games": [
{
"gameId": 4,
"firstTeam": "#25",
"secondTeam": "#27",
"kickOff": 1340829900
}
]
},
{
"name": "Final",
"games": [
{
"gameId": 4,
"firstTeam": "#29",
"secondTeam": "#30",
"kickOff": 1341175500
}
]
}
]
EM.view.MatchList
显示匹配列表的列表视图。
Ext.define('EM.view.MatchList', {
extend: 'Ext.List',
xtype: 'matchlist',
requires: [
'Ext.TitleBar',
'EM.store.Rounds'
],
config: {
id: 'match-list',
store: 'Rounds',
//grouped: true,
scrollable: false,
items: [
{
xtype: 'titlebar',
scrollable: {
direction: 'horizontal',
directionLock: true
},
items: [
{
xtype: 'button',
text: 'Omgång 1',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Omgång 1');
console.log(sto);
}
},
{
xtype: 'button',
text: 'Omgång 2',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Omgång 2');
}
},
{
xtype: 'button',
text: 'Omgång 3',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Omgång 3');
}
},
{
xtype: 'button',
text: 'Kvart',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Kvart');
}
},
{
xtype: 'button',
text: 'Semi',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Semi');
}
},
{
xtype: 'button',
text: 'Final',
handler: function() {
var sto = Ext.getStore('Rounds');
sto.clearFilter();
sto.filter('name', 'Final');
}
}
],
},
{
xtype: 'panel',
html: 'Senast uppdaterad: Idag kl 20:12'
}
],
itemTpl: [
'<div class="match-meta-data">',
'<tpl for="matches">',
'<div class="team-wrapper home-team">{firstTeam} <div class="flag {firstTeamClass}"><span></span></div> <span class="goals-scored">{firstTeamGoals}</span></div>',
'<div class="kick-off-time">{kickOffHour}</div>',
'<div class="team-wrapper away-team"><span class="goals-scored">{secondTeamGoals}</span> <div class="flag {secondTeamClass}"><span></span></div> {secondTeam}</div>',
'<div class="bet-meta-data">',
'<img class="user-icon" src="resources/images/user-22x26.png" />',
'<div class="home-team goals-bet">{firstTeamGoalsBet}</div>',
'<div class="away-team goals-bet">{secondTeamGoalsBet}</div>',
'{pointsEarned}',
'</div>',
'</tpl>',
'</div>',
].join('')
},
});
这是我的第一个 Sencha Touch 应用程序，因此请随时指出您在代码中看到的任何不良做法。有人可以提供一个如何实现我的目标的例子吗？我花了很多时间试图弄清楚这一点。
完整的项目可以从 GitHub 下载，地址为https://github.com/eriktoyra/EM-Tipset。最新的分支是 _filter-match-list。