zoukankan      html  css  js  c++  java
  • ExtJS2.0实用简明教程 Column列布局

            Column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。

             columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
    Ext.onReady(function(){ 
    
    new Ext.Panel({
    
    renderTo:"hello",
    
    title:"容器组件",
    
    layout:"column",
    
    500,
    
    height:100,
    
    items:[{title:"列1",100},
    
    {title:"列2",200},
    
    {title:"列3",100},
    
    {title:"列4"}
    
    ]
    
    }
    
    );
    
    });

        上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如下图所示。

            也可使用columnWidth来定义子元素所占的列宽度,看下面的代码:

    Ext.onReady(function(){ 
    
    new Ext.Panel({
    
    renderTo:"hello",
    
    title:"容器组件",
    
    layout:"column",
    
    500,
    
    height:100,
    
    items:[{title:"列1",columnWidth:.2},
    
    {title:"列2",columnWidth:.3},
    
    {title:"列3",columnWidth:.3},
    
    {title:"列4",columnWidth:.2}
    
    ]
    
    }
    
    );
    
    });

        注意columnWidth的总和应该为1,执行代码将生成如下图所示的内容:

            在实际应用中还可以混合使用,看下面的代码:

    Ext.onReady(function(){ 
    
    new Ext.Panel({
    
    renderTo:"hello",
    
    title:"容器组件",
    
    layout:"column",
    
    500,
    
    height:100,
    
    items:[{title:"列1",200},
    
    {title:"列2",columnWidth:.3},
    
    {title:"列3",columnWidth:.3},
    
    {title:"列4",columnWidth:.4}
    
    ]
    
    }
    
    );
    
    });

        执行上面的代码将会生成如下图所示的结果:

  • 相关阅读:
    @NotNull @NotBlank @NotEmpty
    springboot @valid与@validated的参数校验使用总结
    一张表多个外键指向同一主键
    关于List的remove()方法
    双数据源切换问题
    前端通过jqplot绘制折线图
    关于js与jquery中的文档加载
    Mybatis中typeAliases的使用
    项目中常见数据库知识
    html中实现倒计时功能(setInterval,clearInterval)
  • 原文地址:https://www.cnblogs.com/licheng/p/1317305.html
Copyright © 2011-2022 走看看