《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/ ),以帮助布局者更灵活地生产横向规律或纵向规律的界面。

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

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

 

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

 

©️2020 CSDN 皮肤主题: 岁月 设计师:pinMode 返回首页