extjs xtemplate filter blank row

Question

I am using the following Xtemplate to filter out items by category (see view/panel in which it is "housed" below):

itemTpl: new Ext.XTemplate(
    '<tpl for=".">',
        '<tpl if="category === \'vegetable\'">',
            '<a href="" target="">{str}</a>',
        '</tpl>',
    '</tpl>'),

and it is filtering as expected (well, at least partially).

I have the following store:

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

        ]
    }
});

The Xtemplate is rendered in the following view/panel:

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

When I run this only the vegetables in the store are displayed in the panel- which is great - but blank rows are also displayed where the fruit items were filtered out in the rendered list - which is not great. (Similarly, in my "fruit" view, fruit are displayed as desired, but where there were vegetables, blanks rows show up).

How can I get rid of these blank rows (this is an issue, since the fruits and vegetables in my list are just to get the app working, and are a fill-in to represent a much larger number of records that will be categorized for my actual app). I tried using Ext.IsEmpty and filtering by null, but neither of these did the trick.

Answer 1

The View is working well: it shows a row for each record. You should try to add a filtered store to the list.

Take a look at Ext.util.Filter in the Sencha Touch documentation.

This will solve your problem!