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

Extjs里的组件尽量使用百分比高度和宽度,为什么要这么做了,有如下优势:
1)可以适应不同分辨率,如果是绝对的高度和宽度,当然不能自适应不同的屏幕

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值