PropertiesMethodsEventsConfig OptionsDirect Link

Class Ext.layout.ColumnLayout

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
    }]
});

配置项

配置项 定义者

公告属性

属性 定义者

公共方法

方法 定义者

公告事件

这个类没公共的事件。