具有多个网格和组合的hbox/vbox布局的ExtJS窗口在Internet Explorer上渲染得非常慢

ExtJS Window with multiple grids and combined hbox/vbox layout renders very slow on Internet Explorer

本文关键字：Explorer Internet 窗口 非常 ExtJS 布局 网格 组合 vbox hbox      更新时间：2023-09-26

>我有一个窗口，我想在上面放置 4 个这样的网格

   Grid1 Grid2
   Grid3 Grid4

我希望网格在调整窗口大小时自动调整大小。

使用组合的 hbox/vbox 布局来做到这一点很简单，就像我在上面的示例中所做的那样：

  Ext.onReady(function () {
      var me = this;
      me.store = Ext.create('Ext.data.Store', {
        storeId:'simpsonsStore',
        fields:['name', 'email', 'phone'],
        data:{'items':[
            { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  }
        ]},
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });
      me.g1 = Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
            flex: 1,
        store: me.store, 
        columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ]
    })
    //g2,g3,g4 same with g1
       Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 400,
        width: 600,
         maximizable: true,
        layout: 'fit',
         items: [{
           xtype: 'container',
           layout: 'fit',
           items: [{
              xtype: 'container',
              layout: {
              type: 'vbox',
              align: 'stretch'
              },
              items:[{
            flex: 1,
            xtype: 'container',
        layout: 'hbox',
        items:[me.g1, me.g2]
          },{
            flex: 1,
            xtype: 'container',
        layout: 'hbox',
        items:[ me.g3, me.g4]
          }]
          }]
         }]
    }).show()
    });

在 chrome 上一切正常（窗口在 1 秒内打开），但在 Internet Explorer 上，窗口呈现在 3-5 秒之间，这太多了。

我还尝试左右浮动这 4 个网格，它在 IE 上的渲染效果要好得多，但这样我就会失去网格上的自动滚动（除非我将每个网格放在合适的容器中...... 当我单击记录时，网格上升了若干像素（~20px）

关于如何在没有 3-5 秒渲染的情况下在 IE 上也能很好地工作的任何想法？

我正在使用 ExtJs 4.0.7。

PS：问题不在于网格存储的加载，它们在回调时出现。

您的嵌套肯定比您需要的多，这会显着减慢布局速度。尝试摆脱 2 个外部容器，使其看起来更像这样：

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 400,
    width: 600,
    maximizable: true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items:[{
        flex: 1,
        xtype: 'container',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items:[me.g1, me.g2]
    },{
        flex: 1,
        xtype: 'container',
        layout: {
            type: 'hbox',
            align: 'stretch'
        },
        items:[me.g3, me.g4]
    }]
}).show()

您也可以考虑将窗口初始化为隐藏，然后根据需要显示/隐藏它，而不是每次都重新创建它。

相关文章：