ExtJS的窗口與多個網格並結合橫向盒/ VBOX佈局呈現在Internet Explorer中很慢

我有，我希望把4個格這樣ExtJS的窗口與多個網格並結合橫向盒/ VBOX佈局呈現在Internet Explorer中很慢

Grid1 Grid2 
    Grid3 Grid4

一個窗口，我想網格自動調整大小窗口大小調整。

它是簡單與聯合橫向盒/ 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":"[email protected]", "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() 
    });

一切正常，對鉻（窗口在1秒打開），但的Internet Explorer，窗口呈現3-5秒之間，這是太多了。

我也試圖與浮動4格左右，並在IE渲染的要好得多，但這種方式，我失去網格自動滾屏（除非我把每一個在一個合適的容器......），當我點擊一個記錄的網格上升了許多像素（〜20px）

任何想法如何做到這一點，以及良好的IE瀏覽器以及沒有這些3-5秒的渲染？

我正在使用ExtJs 4.0.7。

PS：問題不是網格商店的加載，他們來回調。

來源

2013-10-25 darkdante

4.0.7的最大問題之一是IE中的速度。如果您無法減少佈局中的嵌套（這可能只對某個點有幫助），那麼您應該嘗試更新至少4.1.3。 – kevhender

謝謝你的答案，kevhender。我意識到這一點，但由於我堅持在工作（現在），我必須找到一個解決方案（使最壞的，我使用核心4.0.1 ... :)）我仍然試圖找出它：D – darkdante

你肯定有比你需要更多的嵌套，這會顯着減慢佈局。儘量擺脫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-01 14:09:22 FoxMulder900

謝謝你的答案，FoxMulder900。我有一個壞的信息，一個vbox/hbox佈局對齊：'stretch'只有在合適的佈局纔有意義。感謝您的提示:)我最終沒有佈局，只是從樣式向右或向左彎曲這些網格，並動態計算窗口大小的尺寸，我認爲它比您的方法更快（至少對我來說 - 從3-5秒到1秒是成就）。再次感謝您的回答:) – darkdante

ExtJS的窗口與多個網格並結合橫向盒/ VBOX佈局呈現在Internet Explorer中很慢

回答

相關問題