您的位置:首页 > Web前端 > extjs > 正文

extjs column列布局

更多 时间:2013-8-5 类别:Web前端 浏览量:12143

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即可。(此方法不通用)