开发者社区> 余二五> 正文

ext-js中的容器和布局(介绍)

简介:
+关注继续查看

 什么是容器(Container)

Extjs被称为是最强大的前端组件库,组件,也就是Component,是可以复用的代码块,并且直接可以和浏览器配合形成最终外观。而容器,是一种特殊的组件,说白了就是用来包含其他组件的组件。而我们的extjs的应用是由若干的组件,以及组件的排列组合嵌套共同组成。

什么是容器布局(Layout):

因为容器是用包含其他组件的,所以容器肯定有一种机制来管理在其中的各个组件,包括它内部的各个组件的尺寸和位置,这时候,布局(Layout)就闪亮登场了

布局生效时间:

一旦设定好了值之后,当初始化组件时,extjs会自动调用容器的doLayout方法,这个方法的作用是计算出所有子组件的尺寸和位置,并且更新到DOM树。doLayout是一种递归调用机制,所以会层层计算直到最底部,一般开发时候程序员不用主动去调用,extjs框架会自动调用。

当我们对于组件进行了任何添加删除或者容器被resize的时候,会触发容器的redoLayout,从而重新计算各个组件的尺寸和位置。我们可以用suspendLayout方法+手动调用doLayout来阻止容器自动布局,而是我们自己来负责布局。

什么是组件布局:

如果是extjs自带的预定义组件,那么我们无需去担心布局问题,因为框架设计者已经为我们做好了一切,但是如果是自己定义的组件,那么我们需要给一个布局方式参数,用componentLayout,否则,它会自动的使用默认的auto的方式进行布局。

 





本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/1192044,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
flex布局之容器元素属性
flex布局之容器元素属性
70 0
Java GUI 容器与布局
Java GUI 容器与布局
62 0
连续三年入围 Gartner 容器竞争格局,阿里云容器服务新布局首次公开
近日,国际知名信息技术咨询机构 Gartner 发布 2021 年容器竞争格局报告,阿里云成为国内唯一连续三年入选的中国企业,产品丰富度与成熟度持续保持全球领先水平。
705 0
连续三年入围 Gartner 容器竞争格局,阿里云容器服务新布局首次公开
阿里云连续三年国内唯一入围Gartner容器竞争格局,解读业界‘顶流’的产品布局。
1376 0
赛题解析 | 初赛赛道2:实现规模化容器静态布局和动态迁移
参赛者需要实现两个功能,一个用于实现规模化的容器静态布局功能,一个用于实现规模化的容器动态迁移功能。
715 0
Flex 布局 - 容器
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82862174 ...
953 0
ExtJS 4 官方指南翻译:容器与布局(Layouts and Containers)
原文:http://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containers 翻译:frank/sp42 转载请保留本页信息 布局系统是 Ext JS 的最强大的部分之一。
917 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
微服务x容器开源开发者 Meetup 上海站
立即下载
云原生架构容器&微服务优秀案例集
立即下载
0225微服务x容器开源开发者MeetupPPT合辑
立即下载