ExtJS 布局组件

来源:互联网 发布:ubuntu命令行中文乱码 编辑:程序博客网 时间:2024/06/07 07:35

有11种布局:

Auto 自动布局

系统自带默认的,使用原始的HTML文档流来布局子元素

CheckboxGroup 复选框组布局

它实现了列布局表单组件CheckboxGroup和RadioGroup的功能
整个页面只允许出现一个 Viewport 实例,

Fit 自适应布局

 使唯一的子元素充满容器,如果当前容器中存在多个子面板则只有第一个会被显示。

accordion 折叠布局

包含多个子面板,但只有一个处于打开状态,子面板都内置对展开和收缩功能的支持
activeOntop 子面板是否保持展开在父面板的顶端 true 是 false 否
animate 子面板收缩是否使用滑动方式 默认true
fill 子面板是否自动调整充满父面板剩余空间 默认true
multi 是否允许同时打开多个子面板,默认false
titleCollapse 是否允许,通过点击子面板标题来展开或收缩面板 默认ture

column 列布局

列的高度允许根据内容进行变化,宽度自设,支持特殊属性columnWidth(指定列的宽度),

table 表格布局

比较容易渲染html表格,columns列数,跨行 rowspan 跨列colspan

card 卡片式布局

包含多个子面板,但只能有一个子面板处于显示状态,一般用来制作向导和标签页

border边框布局

包含多个子面板,面向应用的UI风格布局,它将整个容器分为5个部分
east东、south南、west西、north北、center中。
但需要指定region配置项,来说明加入哪个部分。支持面板分隔栏的支持

anchor 锚点布局

根据容器大小为其包含的子面板进行定位布局。根据容器大小发生变化,并自动渲染

box 盒布局

包含HBoxLayoout 水平盒布局和 VBoxLayout 垂直盒布局
通过flex来划分父容器空间

absolute 绝对位置布局

通过x/y坐标来定位
x:横坐标为距父容器左边缘**像素的位置
y:纵坐标为 上边缘

0 0