冷雨在线
EasyJWEB,JavaScript,Spring,JPA,MySql
半路出家,现在混JAVA.
我的首页
文章
相册
圈子
留言
管理
 
    当前所在页面:首页>>文章>>《ExtJS2.0实用简明教程》之Fit布局
《ExtJS2.0实用简明教程》之Fit布局
    作者:小雨 来源: 发表时间:2008-02-17

 
 

《ExtJS实用开发指南》印刷版3月10号推出,赶快去看看吧。

    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及剩余宽度,执行结果如下图所示。

        再看使用Fit布局后的代码,如下:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

layout:"fit",

width:500,

height:100,

items:[{title:"子元素",html:"这是子元素中的内容"}

]

}

);

});

        上面的代码指定父容器使用Fit布局,因此子将自动填满整个父容器。输出的图形如下:

        如果容器组件中有多个子元素,则只会显示一个元素,如下面的代码:

 

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

layout:"fit",

width:500,

height:100,

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

]

}

);

});

        输出的结果如下:

        如果不使用布局Fit,代码如下:

Ext.onReady(function(){ 

new Ext.Panel({

renderTo:"hello",

title:"容器组件",

width:500,

height:120,

items:[{title:"子元素1",html:"这是子元素1中的内容"},

{title:"子元素2",html:"这是子元素2中的内容"}

]

}

);

});

        输出的结果如下图所示:

(版权声明:本人Blog上的所有文章版本均归EasyJF开源的冷雨所有,受法律保护,可以在互联网上进行转载,转载必须保留作者版权声明及链接;未经本人书面许可,不得把本人Blog上的文章用于出版、发行或其它商业用途。)

上一篇:Column列布局   下一篇:Form布局

 
 

(阅读 )   评论数(:0)
评论】 【收藏】
评论:共0条

发表评论:
发表人:
评论: 
    
 
关于我们 | 诚聘英才 | 联系我们 | 广告业务 | 网站地图 | 法律声明

EasyJF开源团队版权所有  建议使用1024*768分辨率