ExtJS2.0实用简明教程——Column列布局
来源:互联网 发布:屏蔽器能屏蔽4g网络吗 编辑:程序博客网 时间:2024/06/05 14:57
Column列布局由Ext.layout.ColumnLayout类定义,名称为column。列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width:500,height:100,items:[{title:"列1",width:100},{title:"列2",width:200},{title:"列3",width:100},{title:"列4"}]});});
上面的代码在容器组件中放入了四个元素,在容器组件中形成4列,列的宽度分别为100,200,100及剩余宽度,执行结果如下图所示。
也可使用columnWidth来定义子元素所占的列宽度,看下面的代码:
Ext.onReady(function(){ new Ext.Panel({renderTo:"hello",title:"容器组件",layout:"column",width: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",width:500,height:100,items:[{title:"列1",width:200},{title:"列2",columnWidth:.3},{title:"列3",columnWidth:.3},{title:"列4",columnWidth:.4}]});});
执行上面的代码将会生成如下图所示的结果:
- ExtJS2.0实用简明教程——Column列布局
- ExtJS2.0实用简明教程——布局概述
- ExtJS2.0实用简明教程——Border区域布局
- ExtJS2.0实用简明教程——Fit布局
- ExtJS2.0实用简明教程——Form布局
- ExtJS2.0实用简明教程——Accordion布局
- ExtJS2.0实用简明教程——Card布局
- ExtJS2.0实用简明教程——Table布局及其它布局
- ExtJS2.0实用简明教程——ExtJS的组件
- ExtJS2.0实用简明教程——组件的使用
- ExtJS2.0实用简明教程——事件处理
- ExtJS2.0实用简明教程——Panel
- ExtJS2.0实用简明教程——工具栏Toolbar
- ExtJS2.0实用简明教程——选项面板TabPanel
- ExtJS2.0实用简明教程——视图区ViewPort
- ExtJS2.0实用简明教程——窗口基本应用
- ExtJS2.0实用简明教程——窗口分组
- ExtJS2.0实用简明教程——对话框
- ExtJS2.0实用简明教程——窗口分组
- ExtJS2.0实用简明教程——对话框
- ExtJS2.0实用简明教程——布局概述
- 关于微软AD的LDAP的一篇好文章
- ExtJS2.0实用简明教程——Border区域布局
- ExtJS2.0实用简明教程——Column列布局
- ExtJS2.0实用简明教程——Fit布局
- ExtJS2.0实用简明教程——Form布局
- ExtJS2.0实用简明教程——Accordion布局
- ExtJS2.0实用简明教程——Card布局
- ExtJS2.0实用简明教程——Table布局及其它布局
- ExtJS2.0实用简明教程——基本表格GridPanel
- ExtJS2.0实用简明教程——可编辑表格EditorGridPanel
- java Timer实现定时任务