Question

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

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

所以，我不能在这种方法中使用网格（因为我必须对每一行使用＆＃39; colum render function＆＃39;它会导致重新渲染整个网格，即使更改了一行）。

这就是我尝试动态地将每个组件添加到面板的原因。但主要问题是，每当我将组件添加到面板时，都需要很长时间。例如，仅100条记录需要4.5秒。我甚至无法想象1500条记录需要多长时间。

请检查这个小提琴。你会明白确切的问题。请不要忘记check console.time：

https://fiddle.sencha.com/#fiddle/13g0

示例代码：

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');

如果您有任何建议，请将您的想法告诉我。非常感谢你！

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

0 个答案: