Extjs Grid Panel 仅在过滤后加载数据

Question

我的网格窗格的一列有问题：它在一段时间后在一列中显示一个值或者当我进行过滤操作时：

列是这样定义的：

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;
                    }
                }
            },
        ...

我也尝试使用 getById 代替 findRecord，因为我认为 findRecord 可能比较慢，但并没有解决问题。我也尝试使用 beforerender 而不是 render 但它也不起作用。

此外，过滤器似乎不起作用：当楼层值显示时（等待或进行过滤操作后），如果我要过滤特定楼层，过滤器返回 0 行。

我该如何解决？

Answer 1

奇怪，下面的小提琴代码有效，但一个商店只有 4 条记录，另一个商店有 4 条记录。 很遗憾，您没有提供足够的信息。

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: 'lisa@simpsons.com',
                floor: 0
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                floor: 1
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                floor: 2
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                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()
        });
    }
});

无论如何，这段代码在处理大量数据时会非常缓慢。每次网格更改（渲染，过滤器..）都会调用 render() 方法，因此如果您在一个存储中有 100 条记录，在另一个存储中有 1000 条记录，您将进行大约 100*1000 次迭代 + 您正在使用 Ext.getStore(' Floors') 这也可以使渲染变慢。 为了使其更快地工作，您可以通过创建 floorId=>attributes.floor 地图来准备一次数据。比如：

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

渲染器将具有以下视图：

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