其实就是EXT中的布局，常用的有border、column、fit、form、tabel这几种。Fit布局，子元素将自动填满整个父容器（对元素设置宽度无效），如果容器组件中有多个子元素，则只会显示第一个子元素,border布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示;。column布局把整个容器组件看成一列;form是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用;table布局负责把容器中的子元素按照类似普通html 标签
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种一、 absolute 顾名思义，在容器内部，根据指定的坐标定位显示二、 accordion 这个是最容易记的，手风琴效果 ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式Js代码
Ext.onReady(function(){var panel=new Ext.Panel( {//Ext.formPanel就是Panel中用了form布局renderTo:'paneldiv',title:'容器组件',layout:'accordion',width:500,height:200,layoutConfig:{animate:false}, // 表示在执行展开折叠时是否应用动画效果items:[{title:'元素1',html:''},{title:'元素2',html:''},{title:'元素3',html:''},{title:'元素4',html:''}]});});上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面：----001----
三、anchor 这个效果具体还不知道有什么用，就是知道注意一下1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，2.anchor值通常只能为负值(指非百分比值)，正值没有意义，3.anchor必须为字符串值四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。看下面的代码：例一：Js代码Ext.onReady(function(){new Ext.Viewport({layout:"border",items:[{region:"north",height:50,title:"顶部面板"},{region:"south",height:50,title:"底部面板"},{region:"center",title:"中央面板"},{region:"west",width:100,title:"左边面板"},{region:"east",width:100,title:"右边面板"}]});});----002----
例二：Js代码Ext.onReady(function(){var b = new Ext.Button({id:"show-btn", //定义按钮的IDtext:"弹出按钮", //定义按钮的标题renderTo:document.body//将弹出按钮渲染到窗体上});var button = Ext.get('show-btn');var win;button.on('click', function() {//创建TabPanelvar tabs = new Ext.TabPanel({region: 'center', //border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间margins: '3 3 3 0',activeTab: 0, //当前选项卡是第1个(从0开始)defaults: {autoScroll: true},items: [{title: 'Bogus Tab',html: "第一个Tab的内容."}, {title: 'Another Tab',html: "我是另一个Tab"}, {title: 'Closable Tab',html: "这是一个可以关闭的Tab",closable: true //显示关闭按钮}]});//定义一个Panelvar nav = new Ext.Panel({title: 'Navigation',region: 'west', //放在西边，即左侧split: true, //设置为分割width: 200,collapsible: true, //允许伸缩margins: '3 0 3 3',cmargins: '3 3 3 3'});//如果窗口第一次被打开时才创建if (!win) {win = new Ext.Window({title: 'Layout Window',closable: true, //显示关闭按钮width: 600,height: 350,border : false,plain: true,layout: 'border',closeAction:'hide',items: [nav, tabs]//把上面创建的panel和TabPanel放在window中，并采用border方式布局});}win.show(button);});});});----003----
五、card 像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。看下面的代码：例一：Js代码Ext.onReady(function(){var panel=new Ext.Panel({renderTo:"hello",title:"容器组件",width:300,height:200,layout:"card",activeItem: 0,layoutConfig: {animate: true},items:[{title:"子元素1",html:"这是子元素1中的内容"},{title:"子元素2",html:"这是子元素2中的内容"},{title:"子元素3",html:"这是子元素3中的内容"}],buttons:[{text:"切换",handler:changeTab}]});var i=1;function changeTab(){panel.getLayout().setActiveItem(i++);if(i>2)i=0;}});上面的代码创建了一个容器组件面板，面板中包含三个子面板元素，父容器包含一个“切换”按钮，点击该按钮将会执行changeTab函数，该函数实现把父容器中的活动面板在三个子元素之间进行切换。程序的执行结果如下所示：004
点击一下“切换”按钮，结果如下图所示：005
