extjs column列布局

时间：2013-8-5类别：Web前端

extjs column列布局

extjs column列布局

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

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

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

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

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

JScript 代码复制


  Ext.create('Ext.panel.Panel',
    ...{
        title: '容器面板',
        renderTo: 'li1',
        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' }]
            }
        ]
    });

实例效果

二、Extjs Column布局注意事项

1.formPanel上的控件显示不出来，控件的宽度太大，formpanel的宽度相对太小导致。

2.为FormPanel设定了defaultType属性，没有为每个控件单独制定xtype属性。正确的做法是不设置defaultType。

3.在每个column里再加上form layout，再在form里加textfield。

4.在新建TabPanel时，将其属性layoutOnTabChange设置为true即可。（此方法不通用）

标签：

extjs column布局布局

extjs column列布局

extjs column列布局

猜您喜欢

热门推荐