布局概述


????????
????在EXT中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。Ext.BoxComponent是一个盒子组件，可以定义宽度，高度和位置等属性。作为子类，Ext.Container也继承了这些功能，更重要的是，Ext.Container可以使用layout和items属性未作内部的子组件进行布局。
????事实上，我们经常用来设置布局的子类也只有几个，比如用Ext.Viewport进行页面的整体布局，使用Ext.Panel和Ext.Window进行各种嵌套布局，使用Ext.form.FieldSet和Ext.form.FormPanel为表单进行布局。其余的子类都使用默认的渲染形式，很少进行内部布局。
????与Ext.Container相似，所有的布局类也有一个共同的超类Ext.layout.ContainerLayout。凡是继承该超类的子类都可以对Ext.Container和它的子类进行布局定义，这两颗继承树结合在一起便构成了EXT中完整的布局系统。

最简单的布局FitLayout
????
1var?viewport?=?new?Ext.Viewport(????layout:'fit',
3})

????它可以自动适应页面大小的变化，填充整个页面。但如果在items中放入两个控件，会发现第二个控件没有任何效果。即FitLayout布局每次只能使用一个子组件。

常用的边框布局BorderLayout?

?????它将整个布局区域分成了东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的。

var?viewport?=?new?Ext.Viewport(????layout:'border',
????????????????????????????????????????????]
});

????重复一遍，center是绝对不能省的，否则会报错导致程序中断。
??? 在此布局中，north和south可以通过设置height来设置高度(也只能设置高度)；west和east部分可以通过设置width来设置宽度(也只能设置宽度)；同时，我们可以使用split来允许用户自行拖放以改变某一个区域的大小。如：

1