ExtJS2.0实用简明教程 - Column列布局

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

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

转载于:https://www.cnblogs.com/licheng/archive/2008/10/23/1317305.html

ExtJS2.0实用简明教程 - Column列布局相关推荐

ExtJS2.0实用简明教程 - Form布局
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用. 看下面的 ...
duilib教程之duilib入门简明教程9.界面布局
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayout,这样 ...
Python 学习入门（0）—— 简明教程
朋友问我怎么能快速地掌握Python. 我想Python包含的内容很多,加上各种标准库,拓展库,乱花渐欲迷人眼,就想写一个快速的Python教程,一方面保持言语的简洁,另一方面循序渐进,尽量让没有背 ...
1.CSS3 教程-＞多列布局＞ image模块＞ cssTransition 过渡＞ CSS Animations 动画＞ Transform二维
CSS3 教程多列布局 image模块 cssTransition 过渡 CSS Animations 动画 Transform二维介绍 CSS3 是层叠样式表(Cascading Style S ...
css经典布局系列三——三列布局(圣杯布局、双飞翼布局)
文章目录三列布局背景介绍定位实现三列布局浮动实现三列布局圣杯布局双飞翼布局三列布局背景介绍三列元素,左右元素固定宽度: 中间元素自适应: <div id="left&qu ...
css3中的column属性实现多列布局和瀑布流布局
在css3中有新增column属性可以实现页面的排版,使得页面更加整洁,现在一一为大家介绍用法以及属性值. columns:用于设置元素的列宽和列数.它是column-width和column-cou ...
《实变函数简明教程》，第四章：Lebesgue积分，零测集上的任意非负实值函数Lebesgue可积且积分值为0
<实变函数简明教程>,第四章:Lebesgue积分,零测集上的任意非负实值函数Lebesgue可积且积分值为0 待分析命题证明过程待分析命题设E⊂RnE\subset {{\ma ...
HTML5column属性布局页脚,利用column多列属性调整页面文字列布局
column多列属性 column-count:栏目数兼容性写法: CSS Code复制内容到剪贴板 -webkit-column-count:3 -moz-column-count:3 colum ...
Flexbox 布局简明教程-姜威-专题视频课程
Flexbox 布局简明教程-736人已学习课程介绍 flexbox是一种新的布局方式,这种布局方式是2009年W3C提出的方案.它可以简便,完整,完成页面的布局.目前,它已经得到所 ...

ExtJS2.0实用简明教程 - Column列布局

ExtJS2.0实用简明教程 - Column列布局相关推荐

最新文章

热门文章