ExtJS Viewport 高度百分比設置

      不得不說, Extjs 是一個很是優秀的 Ajax UI 框架, 用戶無不爲這麼漂亮的界面所吸引.

 

      但最近發現使用 Extjs 進行窗口布局的時候發現有點不方便, 很難作到高度寬度自適應(根據瀏覽器大小的變化自動調整高度,寬度), 還有高度不能使用百分比只能用數字, 寬度雖然能夠用百分比(anchor)但也只能用在字段中. 

     

      Extjs 提供了另外的一個自適應的控件：Ext.Viewport , 使用這個控件能夠將你的元素部署在 north, south, east, west, center 這五個地方來填充滿你的整個頁面, 其中你能夠固定 north, south 的高度, east, west 的寬度, 其它的部分則能夠根據瀏覽器的大小自動調整本身的大小, 可是有一個不方便的地方就是高度不能像咱們操做 table 同樣 設置爲百分比, 這樣就有一個問題, 當用戶顯示器的分辨率爲 1024*768 或者是 1280*1024 或者是其餘的時候顯示會很不同, 通過不斷嘗試, 找到一種可行的解決方法

 

     listeners: { 'resize': function( viewport, adjWidth, adjHeight, rawWidth, rawHeight ) { Ext.getCmp("southpanel").setHeight((document.body.clientHeight - 290) * 0.67); } }

 

     瀏覽器改變大小會觸發 viewport 的 resize 事件, 好比你將 north 的高度設置爲 290, 那麼你的 center 和 sorth 比例就爲 33%, 67%,同理對於其餘的控件也同樣.