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

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

  • 相关阅读:
    新概念第二册(1)--英语口语听力课1
    外企面试课程(一)---熟悉常见的缩略词
    公司 邮件 翻译 培训 长难句 结课
    workflow
    公司 邮件 翻译 培训 长难句 20
    公司 邮件 翻译 培训 长难句 19
    Engineering Management
    公司 邮件 翻译 培训 长难句 18
    公司 邮件 翻译 培训 长难句 17
    第14.5节 利用浏览器获取的http信息构造Python网页访问的http请求头
  • 原文地址:https://www.cnblogs.com/licheng/p/1317305.html
Copyright © 2011-2022 走看看