extjs 组件与布局

extjs 容器和布局

容器

布局 layout 组件显示的位置

            容器  container 添加 删除 管理 组件            面板  panel 特殊的组件 包含标题栏工具栏            视图  view 显示数据的 grid 和dataView            viewport body作为渲染的对象

Panel：包含title，上下左右工具栏 tool button 内容区。

布局方式

1. vbox 垂直布局
   item 配置项中 flex 高度的比
   items:[{title:’面板1’, flex:1,width:50},//flex 高度之比
   layout:{type:’vbox’,align:’strechmax’}, align 控制拉伸

2.accordion 手风琴布局
3.anchor 锚布局 当容器大小改变时，组件做出相应的变化。 组件相对于容器的大小 可以是百分比 或者 是相差的数值
4.absolute 绝对布局，item中 x y 控制组件显示的位置
5.border 边框布局 东南西北中。item 中 region 配置项
6.table 表格布局 item中 columns 和rowspan 布局控制

工作原理

1. doLayout 方法递归调用
2. 关闭容器的reLayout containerPanel.suspendLayout = false;
   containerPanel.doLayout();

组件

1. items 配置项将组件添加到容器中
2. xtype 代表组件的类型
3. hideMode 显示与隐藏；floating：absolutely-positioned
4. 组件扩展 extend: ‘Ext.Component’.onRender 方法扩展自己的逻辑( 先调用this.callParent(arguments));
5. 自定义类型 alias: ‘widget.managedimage’, // this component will have an xtype of ‘managedimage’