1

我有一个窗口，我想在上面放置 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）

关于如何做到这一点以在 IE 上也能正常工作的任何想法，而无需那些 3-5 秒的渲染？

我正在使用 ExtJs 4.0.7。

PS：问题不是网格存储的加载，它们是回调。

4

1 回答 1

1

你肯定有比你需要的更多的嵌套，这会显着减慢布局。尝试摆脱 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()

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

于 2013-11-01T14:09:22.090 回答