我正在使用以下 Xtemplate 按类别过滤掉项目（请参阅下面“容纳”它的视图/面板）：
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category === \'vegetable\'">',
'<a href="" target="">{str}</a>',
'</tpl>',
'</tpl>'),
它正在按预期过滤（嗯，至少部分过滤）。
我有以下商店：
Ext.define("Produce.store.List", {
extend: 'Ext.data.Store',
alias: 'store.List',
config: {
model: 'Produce.model.Food',
sorters: 'category',
grouper: function(record) {
return record.get('category')[0];
},
data: [
{ category: 'fruit', str: 'tomato'},
{ category: 'fruit', str: 'green bean'},
{ category: 'vegetable', str: 'celery'},
{ category: 'vegetable', str: 'sprouts'},
{ category: 'fruit', str: 'squash'},
{ category: 'fruit', str: 'snap peas'},
{ category: 'vegetable', str: 'rhubarb'},
{ category: 'vegetable', str: 'cabbage'}
]
}
});
Xtemplate 在以下视图/面板中呈现：
Ext.define('Produce.view.Vegetable', {
extend: 'Ext.tab.Panel',
requires: ['Produce.model.Food'],
config: {
tabBar: {
docked: 'top',
ui: 'neutral',
layout: {
pack: 'center'
}
},
items: [{
title: 'Produce',
layout: Ext.os.deviceType == 'Phone' ? 'fit' : {
type: 'vbox',
align: 'center',
pack: 'center'
},
cls: 'demo-list',
items: [{
width: Ext.os.deviceType == 'Phone' ? null : 300,
height: Ext.os.deviceType == 'Phone' ? null : 500,
xtype: 'list',
store: 'List',
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="category === \'vegetable\'">',
'<a href="" target="">{str}</a>',
'</tpl>',
'</tpl>'),
variableHeights: false
}]
}
});
当我运行这个时，只有商店中的蔬菜会显示在面板中——这很好——但是在渲染列表中过滤掉水果项目的地方也会显示空白行——这不是很好。（类似地，在我的“水果”视图中，水果会根据需要显示，但是在有蔬菜的地方，会出现空白行）。
我怎样才能摆脱这些空白行（这是一个问题，因为我列表中的水果和蔬菜只是为了让应用程序正常工作，并且是一个填充物来表示将被分类为的大量记录我的实际应用程序）。我尝试使用 Ext.IsEmpty 并按 null 过滤，但这些都没有成功。