Динамическое создание более 1 тыс. Компонентов в ExtJS

Question

Я получаю с сервера JSON-информацию о «колаборадорах», для каждого колаборадора я создаю панель, как это

   var objChildren=[];
   responseObj.map((colaborador)=>{
    var newColab =Ext.create({
        xtype: 'panel',
        height: 425,
        margin: 10,
        width: 350,
        border: true,
        bodyBorder: false,
        bodyCls: 'panelColab',
        items: [
            {
                xtype: 'panel',
                items: [
                    {
                        xtype: 'image',
                        baseCls: 'image-cropper',
                        style:{
                            backgroundColor:'white',
                            backgroundImage: 'url('colaborador+imageUrl+')'
                        }

                    }
                   //more nested items 
                ]
          }]
        })
      objChildren.push(newColab);
    })
    Ext.getCmp('PanelColab').removeAll();
    Ext.getCmp('PanelColab').add(objChildren);

Проблема в том, что когда этот responseObj имеет значение 1k + colaboradores, браузер сообщает мне, что из-за одной страницы мой браузер замедляется, и спрашивает, хочу ли я остановить загрузку страницы (я использую firefox).

Этот подход является правильным для такого количества компонентов?

Answer 1

Увеличение количества компонентов может замедлить работу страницы.Вы должны использовать DataView с хранилищем, содержащим 1 тыс. Записей, вместо создания 1 тыс. Компонентов.

Пример просмотра данных