Question

Extjs如何使用百分比设置高和宽

例如：在使用border布局的时候，如果我的高和宽都写成固定的值，那么我改变浏览器的大小时，有的组件就会看不到了，如何解决这个问题呢，使用百分比的方式可以解决这么问题么，如何使用百分比设置高和宽呢，期待高手解答！

Answer 1

不得不说, Extjs 是一个非常优秀的 Ajax UI 框架, 用户无不为这么漂亮的界面所吸引. 但最近发现使用 Extjs 进行窗口布局的时候发现有点不方便, 很难做到高度宽度自适应(根据浏览器大小的变化自动调整高度,宽度), 还有高度不能使用百分比只能用数字, 宽度虽然可以用百分比(anchor)但也只能用在字段中. Extjs 提供了另外的一个自适应的控件：Ext.Viewport , 使用这个控件可以将你的元素部署在 north, south, east, west, center 这五个地方来填充满你的整个页面, 其中你可以固定 north, south 的高度, east, west 的宽度, 其它的部分则可以根据浏览器的大小自动调整自己的大小, 但是有一个不方便的地方就是高度不能像我们操作 table 一样 设置为百分比, 这样就有一个问题, 当用户显示器的分辨率为 1024*768 或者是 1280*1024 或者是其他的时候显示会很不一样, 经过不断尝试, 找到一种可行的解决方法 view plaincopy to clipboardprint? listeners: { 'resize': function( viewport, adjWidth, adjHeight, rawWidth, rawHeight ) { </SPAN></li> Ext.getCmp("southpanel").setHeight((document.body.clientHeight - 290) * 0.67); </SPAN></li> } } 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%,同理对于其他的控件也一样.

Answer 2

　　参考如下：
　　view plaincopy to clipboardprint
　　listeners: {
　　'resize': function( viewport, adjWidth, adjHeight, rawWidth, rawHeight ) {
　　Ext.getCmp("southpanel").setHeight((document.body.clientHeight - 290) * 0.67);
　　}
　　}
　　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%,同理对于其他的控件也一样.