在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