Extjs Grid Panel load data only after filtering

Question

I have a problem with a column of my grid pane: it displays a value in one column after a while or when I made a filtering operation:

the column is defined like that:

columns: {
        defaults: {
            flex: 1,
        },
        items: [
          ...,
              {
                text: Strings.sharedFloor,
                dataIndex: 'floor',
                filter:'number',
                renderer: function (value) {

                    position = Ext.getStore('MyStore').findRecord('id', value);

                    if (position) {
                      console.log(position.get('attributes').floor);
                      return position.get('attributes').floor
                    } else {
                       return null;
                    }
                }
            },
        ...

I tried also to use getById instead of findRecord, because I thought that maybe findRecord it is slower, but it didn't solve the problem. I also try to use beforerender instead of render but it also doesn't work.

Furthermore, the filter doesn't seem to work: when the floor value display (after waiting or after I made a filtering operation), if I want to filter for a specific floor, the filter return 0 rows.

How can I solve it?

Answer 1

Strange, the following fiddle code works, but there are only 4 records in one store and 4 records in another one. Unfortunately you did not provide enough information.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var floors = Ext.create('Ext.data.Store', {
            storeId: 'Floors',
            fields: ['id', 'title'],
            idProperty: 'id',
            data: [{
                id: 0,
                title: 'Untergeschoss'
            }, {
                id: 1,
                title: 'Erdgeschoss'
            }, {
                id: 2,
                title: 'Obergeschoss'
            }, {
                id: 3,
                title: 'Dachgeschoss'
            }]
        });

        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: '[email protected]',
                floor: 0
            }, {
                name: 'Bart',
                email: '[email protected]',
                floor: 1
            }, {
                name: 'Homer',
                email: '[email protected]',
                floor: 2
            }, {
                name: 'Marge',
                email: '[email protected]',
                floor: 3
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            plugins: {
                gridfilters: true
            },
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                text: 'Floor',
                dataIndex: 'floor',
                filter: 'number',
                renderer: function (value) {
                    var floor = Ext.getStore('Floors').getById(value);
                    //var floor = Ext.getStore('Floors').findRecord('id', value, 0, false, true, true); 
                    if (floor) {
                      return floor.get('title');
                    } else {
                       return null;
                    }
                }
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});

Anyway this code will work very slow on huge amount of data. The render() method is called on every grid changes (render, filter..) so if you have 100 records in one store and 1000 in another one, you will make approximately 100*1000 iterations + you are using Ext.getStore('Floors') which is also can make the rendering slower. To make it work faster you can prepare the data once by creating floorId=>attributes.floor map. Something like:

var floorsMap = {}; Ext.getStore('Floors').each(function(record) {
    floorsMap[record.getId()] = record.get('title');
});

and the renderer will have the following view:

renderer: function (value) {
    return floorsMap[value];
}