在ExtJS中动态创建超过1k组件

Question

我从服务器接收有关'colaboradores'的JSON信息，对于每个colaborador我正在创建一个面板，像这样

   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用于包含1k记录的存储，而不要创建1k组件。

DataView Example