主要介绍Column列布局,适用于分块展示信息,不过个人觉得不是很好看列布局把整个容器组件看成一列,然后往里面放入子元素的时候,可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度,而width则是使用绝对象素的方式指定列宽度,在实际应用中可以混合使用两种方式。看下面的代码:
代码:
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title> New Document </title> <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext/ext-all.js"></script> </head>
<body> <script> Ext.onReady(function(){ var p = new Ext.Panel({ title: 'column布局', width:500, height:100, layout:'column',//声明布局类型为column renderTo:'show',//填充到id为show的区域 items: [{ title: '列1',//标题 html:'<p>列1内容</p>', //width:100,//采用固定像素宽度 columnWidth: .25 //采用比例宽度,相当于百分比,总和为1,这里相当于25%,columnWidth总和必须为1 },{ title: '列2', html:'<p>列2内容</p>', //width:100, columnWidth: .25 },{ title: '列3', html:'<p>列3内容</p>', //width:300, columnWidth: .5 }] }); }); </script> <div id='show'></div> </body> </html>
运行以上代码,将有如下效果:
个人感觉这个布局不是很好看,到此为止布局控件的使用基本介绍完了,接下来将介绍非常受欢迎且有用的控件:树形控件。
|
转载于:https://www.cnblogs.com/dxs376263348/archive/2009/09/29/1576106.html