Ext教程连载 - Fit布局

最新推荐文章于 2024-09-16 08:47:17 发布

weixin_30550081

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量82

点赞数

文章标签： javascript ViewUI

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

版权

主要介绍fit布局，用于嵌套布局时使之自适应容器大小，通常用于菜单，表单等的嵌套布局。 Fit布局顾名思义，Fit即“自适应”的意思，通常使用在我们进行嵌套布局的时候使用，例如：窗体里嵌套表单面板等(在接下来实例分析里会具体介绍)，这里以一个面板（panel）的简单例子来说明fit布局的意义。看以下代码：

代码:

<!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(){
new Ext.Panel({
renderTo:'show',//填充到id为show的区域
title:'fit布局的面板',
layout:'fit',//声明为fit布局
width:500,
height:200,//无论我将panel的宽度，高度设为多少，子元素都将自适应面板大小，自动填充全部区域
items:[{
title:'内容',
html:'我的大小是自适应面板大小的'
}]
});
});
</script>
<div id='show'></div>
</body>
</html>