Ext js Grid Panel загружает данные только после фильтрации - PullRequest
Новая
       78

Ext js Grid Panel загружает данные только после фильтрации

0 голосов
/ 06 августа 2020

У меня проблема со столбцом на панели сетки: через некоторое время он отображает значение в одном столбце или когда я выполнял операцию фильтрации :

столбец определяется как 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;
                    }
                }
            },
        ...

Я также пробовал использовать getById вместо findRecord, потому что думал, что, возможно, findRecord работает медленнее, но это не решило проблему. Я также пытаюсь использовать beforerender вместо рендеринга, но это тоже не работает.

Более того, похоже, фильтр не работает: когда отображается минимальное значение (после ожидания или после того, как я выполнил операцию фильтрации) , если я хочу отфильтровать указанный c этаж, фильтр вернет 0 строк.

Как я могу решить эту проблему?

1 Ответ

0 голосов
/ 06 августа 2020

Странно, следующий код скрипки работает, но в одном магазине всего 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 map. Что-то вроде: 

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

и рендерер будет иметь следующий вид: 

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