Extjs 如何优化向视图中添加组件？

首先，我有大约1000-1500条记录，我需要以自定义样式在网格中显示它们。但是，第一行必须包含复选框和一个表单（combo，textfield），该表单位于该复选框下方。 类似于：

row1: checkbox
      combo, textfield, textfield
row2: checkbox
      combo, textfield, textfield
...

所以，我不能在这种方法中使用网格（因为我必须对每一行使用“ColumRender函数”，即使更改一行，也会导致重新渲染整个网格）

这就是我尝试将每个组件动态添加到面板的原因。但主要的问题是，每当我向面板添加组件时，都会花费太长的时间。例如，只有100条记录需要4.5秒。我甚至无法想象1500张唱片需要多长时间

请检查一下这把小提琴。你会明白确切的问题。请不要忘记检查控制台。时间：

和示例代码：

console.time('FakeGrid');
        Ext.suspendLayouts();
        var fakeGrid = Ext.create('Ext.panel.Panel', {
            title: 'Fake grid Panel',
            renderTo: Ext.getBody(),
        });



        var records = [];
        for(var i=0; i < 10; i++) {
            records.push({
                id: 'Check'+ i,
                reg: 'Reg' + i
            })
        }

        Ext.each(records, function(rec) {
            var regionPanel = {
              xtype: 'fieldset',
              collapsible: true,
              border: false,
              title: rec.reg,
              layout: 'vbox',
              items: []
            };
            Ext.each(records, function(rec) {
                var hBoxPanel = {
                  xtype: 'panel',
                  layout: 'hbox',
                  items: [{
                    xtype: 'checkbox',
                    boxLabel: rec.id
                  }]
                };
                var fakeSubPanel = Ext.create('Ext.panel.Panel', {
                    layout: 'hbox',
                    items: [{
                        xtype: 'combobox',
                        fieldLabel: 'Combo'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'field1'
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'field2'
                    }] 
                });
                var sitePanel = {
                  xtype: 'panel',
                  layout: 'vbox',
                  //margin: '5 0 0 31',
                  items: [hBoxPanel, fakeSubPanel]
                };
                regionPanel.items.push(sitePanel);
            }); //Ext.each
            fakeGrid.add(regionPanel);
        }); //Ext.each

        Ext.resumeLayouts(true);
        console.timeEnd('FakeGrid');

console.time（'FakeGrid'）；
Ext.suspendLayouts（）；
var fakeGrid=Ext.create（'Ext.panel.panel'{
标题：“假网格面板”，
renderTo:Ext.getBody（），
});
var记录=[]；
对于（变量i=0；i<10；i++）{
记录。推送({
id:'检查'+i，
注册：'注册'+i
})
}
Ext.each（记录、功能（rec）{
var区域面板={
xtype:“字段集”，
可折叠的：是的，
边界：错，
标题：rec.reg，
布局：“vbox”，
项目：[]
};
Ext.each（记录、功能（rec）{
var hBoxPanel={
xtype:'面板'，
布局：“hbox”，
项目：[{
xtype:'复选框'，
boxLabel:rec.id
}]
};
var fakeSubPanel=Ext.create（'Ext.panel.panel'{
布局：“hbox”，
项目：[{
xtype:“组合框”，
字段标签：“组合”
}, {
xtype:'textfield'，
fieldLabel:“field1”
}, {
xtype:'textfield'，
fieldLabel:“field2”
}] 
});
var sitePanel={
xtype:'面板'，
布局：“vbox”，
//边距：“50 0 31”，
项目：[hBoxPanel，fakeSubPanel]
};
regionPanel.items.push（sitePanel）；
})；//分机
添加（区域面板）；
}); //分机
Ext.resumeLayouts（真）；
控制台.timeEnd（'FakeGrid'）；

---

如果你有什么建议，请告诉我你的想法。非常感谢你

似乎是用户体验问题：-）可能是用户体验问题的一部分。但是，当我将这些记录放入网格时，它会在几秒钟内呈现：）应该是更好的方式，否则我在某处做了一些错误的事情。网格速度更快，但它不会呈现所有记录，它只呈现“可见”记录。我真的不明白使用网格的问题是什么？为什么要使用rendere？对于这些目的，可以使用WiGeGeLead。像这样的“SythHgk。考虑这个帖子：好像是一个UX问题：-”可能是UX问题的一部分。但是，当我将这些记录放入网格时，它会在几秒钟内呈现：）应该是更好的方式，否则我在某处做了一些错误的事情。网格速度更快，但它不会呈现所有记录，它只呈现“可见”记录。我真的不明白使用网格的问题是什么？为什么要使用rendere？你可以为这些目的使用WaveGube。类似这样的话，请考虑这个帖子：