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%,同理对于其他的控件也一样.