Templates extjs xtemplate筛选器空行

我正在使用以下Xtemplate按类别筛选项目（请参见下面的视图/面板，其中包含该项目）：

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.define（'product.view.vegeture'{
扩展：“Ext.tab.Panel”，
要求：['product.model.Food']，
配置：{
选项卡栏：{
停靠：“顶部”，
ui:'中立'，
布局：{
包装：'中心'
}
},
项目：[{
标题:"生产",，
布局：Ext.os.deviceType=='Phone'？'fit'：{
键入：“vbox”，
对齐：'居中'，
包装：'中心'
},
cls:“演示列表”，
项目：[{
宽度：Ext.os.deviceType=='Phone'？空值：300，
高度：Ext.os.deviceType=='Phone'？空值：500，
xtype:'列表'，
商店：'列表'，
itemTpl:new Ext.XTemplate(
'',
'',
'',
'',
''),
可变高度：错误
}]
}
});

当我运行此操作时，只有商店中的蔬菜才会显示在面板中-这很好-但在呈现列表中过滤掉水果项目的位置也会显示空白行-这不是很好（类似地，在我的“水果”视图中，水果会根据需要显示，但如果有蔬菜，则会显示空白行）

---

我如何才能去掉这些空白行（这是一个问题，因为我列表中的水果和蔬菜只是为了让应用程序工作，并且是一个填充，代表了更多的记录，这些记录将为我的实际应用程序分类）。我尝试使用Ext.IsEmpty和按null筛选，但这两种方法都没有奏效。

视图工作正常：它为每条记录显示一行。您应该尝试向列表中添加筛选存储

请看下面的图片

---

这将解决您的问题！

我本来会使用过滤器，但是如果我在另一个视图（特别是蔬菜视图）中使用商店，我将无法获得完整的商店内容。没关系，我看到我可以在渲染视图之前进行clearFilter。我稍后会尝试，并让您知道它是如何工作的。Grazi！

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

        ]
    }
});

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