extjs xtemplate过滤空白行

Question

我正在使用以下 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 过滤，但这些都没有成功。

Answer 1

视图运行良好：它为每条记录显示一行。您应该尝试将过滤后的商店添加到列表中。

看看Ext.util.Filter中的Sencha Touch documentation。

这会解决你的问题！