| Defined In: | ColumnLayout.js |
| Class: | Ext.layout.ColumnLayout |
| Extends: | Ext.layout.ContainerLayout |
这是为构建多个垂直式结构而准备的布局, 当中包含已指定宽度的多个列,列的宽度可以是固定值,也可以是可伸缩的百分比宽度,但里面的内容就是自适应高度了。 应通过继承此类或设置Ext.Container#layout的配置layout:'column' 的方式创建,一般很少通过关键字new直接使用。
虽然ColumnLayout没有直接的配置项(不同于继承),但是ColumnLayout的任意一个子面板都支持特殊的配置项属性 columnWidth。 可采用width(像素)或columnWidth(百分比)的方式来决定面板的尺寸大小,如不为面板指定width或columnWidth, 那么将缺省为面板的自动宽度。 属性width是以象素pixles来固定宽度,并必须是数字大于或等于1;属性columnWidth是百分比相对单位,并必须是百分比字符串区间是大于0小于1(像.25)。
分配列宽度的基本规则非常简单。UI逻辑会将所包含的一组面板分成两类: 第一类是宽度固定值或不指定的(设置为auto)面板,当此类面板传入到布局时,先不立即渲染,但它们的宽度就会从容器的总宽度减去; 第二类是以百分比指定的面板,百分比的含义时在基于剩下宽度中计算的百分比。当传入布局时,会将这些百分比转换为宽度的固定数字值,分配到面板上。 换句话讲,百分比的面板的用途填充由固定值宽度或AUTO宽度面板占据后所留下的空间。因此,虽然你可以以不同的百分比来分配列,但columnWidth加起来必须是等于1(或100%)。 否则的话,渲染出来的布局可能出现不正常。用法举例:
// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
title: 'Column Layout - Percentage Only',
layout:'column',
items: [{
title: 'Column 1',
columnWidth: .25
},{
title: 'Column 2',
columnWidth: .6
},{
title: 'Column 3',
columnWidth: .15
}]
});
// Mix of width and columnWidth -- all columnWidth values values must add
// up to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
title: 'Column Layout - Mixed',
layout:'column',
items: [{
title: 'Column 1',
width: 120
},{
title: 'Column 2',
columnWidth: .8
},{
title: 'Column 3',
columnWidth: .2
}]
});
| 配置项 | 定义者 | |
|---|---|---|
|
CSS
: String
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容...
一个可选添加的CSS样式类,加入到组件的容器上(默认为'')。 这为容器或容器的子节点加入标准CSS规则提供了方便。
|
ContainerLayout | |
|
renderHidden
: Boolean
True表示为在渲染时隐藏包含的每一项(缺省为false)。
True表示为在渲染时隐藏包含的每一项(缺省为false)。
|
ContainerLayout | |
| 属性 | 定义者 | |
|---|---|---|
|
activeItem: activeItem
一个已激活Ext.Component的引用 例如,if(myPane...
一个已激活Ext.Component的引用 例如,if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。(像Ext.layout.Accordion, Ext.layout.CardLayout和Ext.layout.FitLayout)。只读的。 Related to Ext.Container#activeItem.
|
ContainerLayout | |
| 方法 | 定义者 | |
|---|---|---|