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’

你可能感兴趣的:(ExtJs)