日期:2014-05-16 浏览次数:20333 次
1 介绍 布局,简单来说就是设置元素的大小和位置。 Ext 的布局系统包括组件,布局,容器,容器是一种特殊的组件,可以管理组件的大小和位置。 容器是通过 doLayout 来重新计算布局,并更新 DOM. 2 手工布局是不必要的,框架会为你自动处理。当然为了性能,可以进行手工布局。 ct.suspendLayout = true; ct.add(...); ct.suspendLayout = false; ct.doLayout(); 3 布局类型: 组件布局 dock tip 容器布局 auto card fit hbox vbox anchor table absolute column 3 Ext大部分容器默认使用auto布局,默认不使用auto布局的容器: FieldSet anchor ButtonGroup table FormPanel | RowEditor anchor TabPanel card Toolbar | Paging hbox 4 各种布局的使用与配置: auto 子组件属性: width height column: 如果每个子组件的宽度小10,列布局失效。缩放有问题。 子组件属性: columnWidth 百分比 table : 容器属性: columns 列数 子组件属性: colspan rowspan border : 容器属性: layout.align 子组件属性: region west l|east r |center |south b|north t width height hbox |vbox 可指定溢出处理,伸缩效果好。 容器属性: layout.align 子组件属性: flex accordion 伸缩 checkboxgroup 通常适合单选,多选组件 容器属性: vertical columns fit 伸缩效果好 但只能有一个子组件. card 卡片布局 anchor 伸缩效果好 子组件属性: anchor : "100% 50%" 百分比 anchor : "-20, -20" 偏移(相对右下边) absolute 子组件属性: x y