欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

子组件自适应容器滚动条 尽量使用百分比宽度高度

程序员文章站 2022-05-15 18:04:15
...
Extjs里的组件尽量使用百分比高度和宽度,为什么要这么做了,有如下优势:
1)可以适应不同分辨率,如果是绝对的高度和宽度,当然不能自适应不同的屏幕

2)当你要动态往容器理添加组件的时候,如果是百分比宽度和高度,当容器的内容超出容器的大小时,容器通常会出现滚动条,但是有一个很重要的问题,如果容器里面的组件,你使用的是绝对的高度和宽度,你会发现,子组件的宽度和高度不会自动增减滚动条的宽度或高度,这个时候很郁闷,我曾经卡在这个问题上了,一种临时的解决方案是自己用代码取判断容器是否出现滚动条,如果出现了,我们手动将容器中的子组件的高度和宽度减去滚动条的值即可,但是很快你就会发现,需要这样中的地方太多了,随着各种事件的发生,最终会变成你全不手动来控制滚动条,于是代码量暴增,而且可读性差,最麻烦的是你很难把所有可能的情况都处理掉,所以不建议手动控制滚动条,最轻松的解决方案是,设置百分比宽高度,如果一个组件你已经设置了绝对值,你希望它能自适应,那么最简单的办法,是先将该组件从其父容器中remove掉,然后设置该组件的宽高度为容器的百分比值,在从新add到容器里,那么此时如果容器出现了滚动条,子组件可以很好的自适应。