如何使Ext.grid.Panel自動適應其父分區大小，而父母更改？

我有一個網格面板如下：如何使Ext.grid.Panel自動適應其父分區大小，而父母更改？

Ext.define('Summary', { 
    extend: 'Ext.data.Model', 
    fields: ['A', 'B', 'C'] 
}); 

var summaryStore = Ext.create('Ext.data.Store', { 
    model: 'Summary', 
    data: summaries 
}); 

Ext.create('Ext.grid.Panel', { 
    renderTo: summaryNode, 
    store: summaryStore, 
    layout: 'fit', 
    resizable: true, 
    title: 'Application Users', 
      columns: [{ 
       text: 'A', 
       flex: 1, 
       dataIndex: 'A' 
      }, { 
       text: 'B', 
       flex: 1, 
       dataIndex: 'B' 
      }, { 
       text: 'C', 
       flex: 1, 
       dataIndex: 'C' 
      }] 
});

而且summaryNode是div，我的應用程序的CSS改變summaryNode做大，但我在它創建的網格面板並沒有相應地改變其大小。

我該怎麼做？

來源

2014-01-13 Howard

首先，嘗試將resizable配置參數設置爲true！如果它不符合您的要求，則處理onWindowResize事件。

Ext.EventManager.onWindowResize(function() { 
    var w = Ext.getBody().getViewSize().width; 
    var h = Ext.getBody().getViewSize().height; 
    // give an id to the grid panel, lets say 'sample-grid' 
    Ext.getCmp('sample-grid').setSize(w, h); 
})

來源

2014-01-13 13:52:40

很酷，這真的是我想要的。非常感謝。但仍有一件事讓我感到不舒服。一旦我使用JQuery觸發窗口調整大小事件爲$（window）.trigger（'resize'）'，Ext.EventManager沒有收到任何東西。只有窗口的大小確實發生了變化纔會觸發'Ext.EventManager'。所以我得到我的解決方法，像'$（window）.on（'resize'，function（e）{0} {'summary'）。 .height（）; Ext.getCmp（'summaryGrid'）.setSize（w，h）; }）;' – Howard

此外，今天我收到一封電子郵件，它是JavaScript'matchMedia'方法。 'matchMedia'類似CSS的媒體查詢。如果您有興趣查看Mozilla MDN網絡或http://us5.campaign-archive1.com/?u=ea228d7061e8bbfa8639666ad&id=3732d5c95d&e=db1cd31664 –

如何使Ext.grid.Panel自動適應其父分區大小，而父母更改？

回答

相關問題