Extjs布局之fit布局说明实例

1、首先我们要看的是Extjs fit布局的具体页面展示效果 有以下几个特点：1）fit布局的面板下面子元素只显示第一个元素2）fit布局下显示的元素将铺满剩余的父元素空间3）设置fit布局以后再设置高度、宽度不起作用如下图我们看看fit布局的效果：

2、fit布局实现的基本实例 fit布局的实现代码如下： Ext.onReady(function(){ new Ext.Panel({ renderTo:Ext.getBody(), title:"容器组件", layout:"fit", width:500,height:100, items:[{title:"子元素1",html:"这是子元素1中的内容"}, {title:"子元素2",html:"这是子元素2中的内容"} ] } ); }); 注意：在上面的代码中fit布局只是会显示其中的子元素1，而不会显示子元素2，因为子元素1会铺满父元素的全部剩余空间。

3、fit布局界面布局设计思路： 1）把握只能显示一个子元素这一特点2)注意与tabpanel结合使用是可以达到显示多个tab的目的的 3）fit布局的铺满效果在窗口最大化的时候是会随着窗口变化而变化的