extjs column列布局

extjs column列布局

更多2013/8/5  来源：extjs学习 浏览量：5767

学习标签：  extjs  column布局  布局

本文导读：column列布局是多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的属性columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。

Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。

Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。

注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。

另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。

下面介绍一个简单的实例：

 

JScript 代码    复制

  Ext.create('Ext.panel.Panel',
    {
        title: '容器面板',
        renderTo: 'div1',
        width: 400,
        height: 300,
        layout: 'column',
        defaults:
            {                     
                layout: 'anchor', 
                defaults: {   anchor: '100%'  } 
            },
        items:
         [
            {  
                columnWidth: 4 / 10,        //设置列的宽度
                items:
                [
                    {
                        title: '面板1',
                        border: false,
                        html: '子元素1'
                    },
                    {
                        title: '面板2',
                        border: false,
                        html: '子元素2'
                    }
                ]
            },
            {
                width: 120,
                items:[{ title: '面板3', border: false, html: '子元素3' }]
            },
            {
                columnWidth: .40,
                items: [{ title: '面板4', border: false, html: '子元素4' }]
            }
        ]
    });