ExtJS的面板的布局

ExtJS的布局

ExtJS通过提供多种布局类来为面板提供支持,主要包括一下11种:

1.Auto自动布局

是默认的布局类型.它使用原始的HTML文档流来布局子元素,并把布局调用传递到子容器中,对应面板布局配置项(layout)的名称为Auto

2.Fit自适应布局

它使一个子元素充满容器,如果容器内有多个子面板则只有第一个会显示

3.Accordion折叠布局

该布局会包含多个子面板,任何时候都只有一个子面板处于打开状态,每个子面板都内置了展开和收缩

4.Card卡片布局

该布局会包含多个子面板,任何时候都只有一个子面板处于显示状态,用户可以通过setActiveItem方法,设置切换子面板的顺序,这种布局常用来制作向导和标签页

5.Anchor锚点布局

根据容器大小动态地对子面板进行定位的布局

6.Absolute绝对位置布局

它可以根据子面板中配置的x/y坐标进行定位

7.CheckBoxGroup复选框组布局

它按照布局表单组件的复选框组和单选框组进行布局

8.Column列布局

它类似于一种多列风格样式的布局,列宽可以设置

9.Table表格布局

这种布局允许你非常容易地渲染内容到HTML表格中,可以指定列数,跨行,跨列,可以创建出复杂的表格布局

10.Border边框布局

将容器分为东南西北中五个部分,子面板加入时要指定region配置到具体的位置

11.Box盒布局

分为HBoxLayout(水平盒布局)和VBoxLayout(垂直盒布局)两个子类,该布局通过子元素的flex配置来划分父容器的空间