extJS 布局

• １、布局概述

　　容器中可以放置各种各样的元素，这些元素在容器怎么排放，是从左到右，还是从上到下，这些是容器自身所不知道的。容器中的子元素如何排放，在Ext中由布局来处理。　　

　　所谓布局就是指容器组件中子元素的分布、排列组合方式。Ext的所有容器组件都支持布局操作，每一个容器都会有一个对应的布局，布局负责管理容器组件中子元素的排列、组合及渲染方式等。

　　Ext提供了一套功能强大的布局系统，通过这些布局的应用，可以满足应用程序中各种复杂的用户界面布局处理，下面我们将对ExtJS中的布局作介绍。Ext中的每一个布局类都有一个简短的布局名称，在使用布局的时候直接使用布局名称即可。

　　布局主要应用于容器组件，在Container类中，提供了一个layout配置选项，该项可以是一个预定义布局名称（字符串），也可以是一个布局对象。比如下面是两种使用布局的方式：

 

new Ext.Panel({
  renderTo:"test",
  width:400,
  height:100,
  layout:new Ext.layout.ColumnLayout(),
  items:[{columnWidth:.5, title:"面板1"},
      {columnWidth:.5, title:"面板2"}]
  });

  new Ext.Panel({
  renderTo:"test",
  width:400,
  height:100,
  layout:"column",
  items:[{columnWidth:.5, title:"面板1"},
      {columnWidth:.5, title:"面板2"}]
  });

　　ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息。如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需要layoutConfig配置。

　　Ext中的一些容器组件都已经指定所使用的布局，比如TabPanel使用card布局、FormPanel使用form布局，GridPanel中的表格使用column布局等，我们在使用这些组件的时候，不能给这些容器组件再指定另外的布局。

• ２、通过Examples看常用布局示例,

　　Ext Layout Browser、Border Layout示例；

• ３、Border布局，把容器分成东西南北中几大区域，容器中的元素可以通过region属性来指定子元素放置在容器中的什么位置。
• 
  
• ４、Column布局，把子元素按列排放，通过columnWidth及width属性来指定子元素的所占的列宽度。
• 
  
• ５、Form布局，容器中的元素包括标题及组件内容两项值。
• 
  
• ６、Fit布局，子元素填充整个容器区域。
• 
  
• ７、Accordion布局，折叠布局。

/*
 * 常用的布局：column布局, border布局
 */
function createPanel1(){
    var panel = new Ext.Panel({
        width: 600,
        height:300,
        title:"父面板",
        layout: "column",
        items:[{title:"面板1", columnWidth:0.25,height:80, html:"111111"},
                {title:"面板2", columnWidth:0.25,height:90, html:"22222"},
                {title:"面板3", columnWidth:0.25,height:90, html:"3333333333,sdfaskg"},
                {title:"面板4", columnWidth:0.25,height:110, html:"44444wsdf,,asdalg"}
            ]
    });
    panel.render("d1");
}

Ext.onReady(function(){
        createPanel1();
    });

function createBord(){
    new Ext.Viewport({
            layout:"border",
            items:[{region:"north",    height:50,title:"顶部面板"},
                    {region:"south",height:50,title:"底部面板"},
                    {region:"center",title:"中央面板"},
                    {region:"west",    width:100,title:"左边面板",split:true,collapsible:true},
                    {region:"east",    width:100,title:"右边面板"}
            ]
    });
}