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）

3〜5秒のレンダリングなしで、IEでもうまく機能するようにする方法についてのアイデアはありますか?

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 に答える