次の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でフィルタリングしようとしましたが、どちらもうまくいきませんでした。