Ext教程连载 - Column列布局

最新推荐文章于 2021-07-01 02:58:41 发布

weixin_30379531

最新推荐文章于 2021-07-01 02:58:41 发布

阅读量168

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dxs376263348/archive/2009/09/29/1576106.html

版权

主要介绍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

weixin_30379531

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext教程连载 - Column列布局

主要介绍Column列布局，适用于分块展示信息，不过个人觉得不是很好看列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。 columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：代码: ...
复制链接

扫一扫