extjs 组件与布局
2016-03-15 21:08
232 查看
extjs 容器和布局
容器
布局 layout 组件显示的位置容器 container 添加 删除 管理 组件 面板 panel 特殊的组件 包含标题栏工具栏 视图 view 显示数据的 grid 和dataView viewport body作为渲染的对象
Panel:包含title,上下左右工具栏 tool button 内容区。
布局方式
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 布局控制
工作原理
doLayout 方法递归调用关闭容器的reLayout containerPanel.suspendLayout = false;
containerPanel.doLayout();
组件
items 配置项将组件添加到容器中xtype 代表组件的类型
hideMode 显示与隐藏;floating:absolutely-positioned
组件扩展 extend: ‘Ext.Component’.onRender 方法扩展自己的逻辑( 先调用this.callParent(arguments));
自定义类型 alias: ‘widget.managedimage’, // this component will have an xtype of ‘managedimage’
相关文章推荐
- jsp登录界面(一)
- JavaScript 简介
- js中的toString
- JSTL 核心标签库
- JS对象继承方法
- javascript中为什么有时需要创建立即执行的函数
- js面向对象二--封装
- 玩转JavaScript正则表达式
- JSP and Servlet
- JavaScript高级程序设计(第三版)学习笔记22、24、25章
- fastjson 使用笔记
- JavaScript打印杨辉三角
- JavaScript子文本传到父文本框显示
- 通用JSON生成器3
- JavaScript节点属性
- 用JS控制图片随鼠标移动
- js 数组定义与常用函数小结
- JavaScript系列:模块化与链式编程
- SWFUpload 和Extjs3.3 + swfUpload2.2 实现多文件上传组件
- JavaScript系列:函数调用方式