《ExtJS详解与实践》阅读补充资料：Grid如何高/宽自适应

Grid高度自适应是许多用户开发过程中碰到过的问题。问题在于，尽管本类是由Panel类继承而得到的，但是不支持其基类的某些功能，所以不能都做到好像一般Panel类那样的方法来解决，如autoScroll、autoWidth、layout、items等……

Grid需要指定一个宽度来显示其所有的列，也需要一个高度来滚动列出所有的行。这些尺寸都通过配置项BoxComponent.height和Ext.BoxComponen.width来精确的指定，又或者将Grid放置进入一个带有某种布局风格的容器中去，让上层容器来管理子容器的尺寸大小。

• 指定Ext.Container配置项layout为“fit”的布局就可以很好地自适应容器的拉伸了，对于任何类型的容器都是有效的。如果GridColumn自适应宽度不能解决，还有一个来自坊间的办法：固定GridPanel的width 比如600px,按照比例配制每一个Column的宽度，比如300,200,100 ，设置autoExpandColumn,然后在GridPanel外面嵌套一个Panel layout:'fit'。
• 如果一行有多个Grid，则使用Ext.layout.HboxLayout（对应VboxLayout），如下图和代码。

HboxLayout风格的多个比例Grid（点击图片 放大）

Hbox和Vbox是3.0崭新引入的布局类，其构思来源于CSS3的Flexible箱子模型（参考文档：www.w3.org/TR/2009/WD-css3-flexbox-20090723/ ），以帮助布局者更灵活地生产横向规律或纵向规律的界面。

var p = new Ext.Panel({ title:'::业务成功率(近4个统计周期)::', region:'center', // 新的布局方式 layout:{ type:'hbox', align : 'stretch', pack : 'start' }, defaults:{ flex:1 // 子元素平均分配宽度 }, split:true, frame:true, items:this.businessGridArr, // 前面定义的一个Grid数组 tbar:toolbar });

如果几个Grid需要不同的宽度，则分布给他们设置flex配置项，box布局会把全部的flex总和后求百分比。

P.S 本文感谢Javaeye网友供图、供代码！

 

此处披露的内容是《ExtJS 3详解与实践》 的补充内容，完整的资料敬请参阅《ExtJS 3 详解与实践》 一书的全面介绍。