Extjs之格局详解

Extjs之布局详解

Extjs布局就是以一定的排版显示显示元素，不同的布局有不同的效果，并可以互相嵌套使用。layout : String/Object

*Important: In order for child items to be correctly sized and positioned, typically a layout manager must be specified through the layout configuration option.

The sizing and positioning of child items is the responsibility of the Container's layout manager which creates and manages the type of layout you have in mind. For example:

new Ext.Window({    width:300, height: 300,    layout: 'fit', // explicitly set layout manager: override the default (layout:'auto')    items: [{        title: 'Panel inside a Window'    }]}).show();

If the layout configuration is not explicitly specified for a general purpose container (e.g. Container or Panel) the default layout manager will be used which does nothing but render child components sequentially into the Container (no sizing or positioning will be performed in this situation). Some container classes implicitly specify a default layout (e.g. FormPanel specifies layout:'form'). Other specific purpose classes internally specify/manage their internal layout (e.g. GridPanel, TabPanel, TreePanel, Toolbar, Menu, etc.).

layout may be specified as either as an Object or as a String:

• Specify as an Object
  • Example usage:

    layout: {    type: 'vbox',    padding: '5',    align: 'left'}

  • type
    

    The layout type to be used for this container. If not specified, a default Ext.layout.ContainerLayout will be created and used.

    
    

    Valid layout type values are:

    • absolute
    • accordion
    • anchor
    • auto     Default
    • border
    • card
    • column
    • fit
    • form
    • hbox
    • menu
    • table
    • toolbar
    • vbox
    • Layout specific configuration properties
      

      Additional layout specific configuration properties may also be specified. For complete details regarding the valid config options for each layout type, see the layout class corresponding to the type specified.

    • Specify as a String
      • Example usage:

        layout: 'vbox',layoutConfig: {    padding: '5',    align: 'left'}

      • layout
        

        The layout type to be used for this container (see list of valid layout type values above).

        
        
      • layoutConfig
        

        Additional layout specific configuration properties. For complete details regarding the valid config options for each layout type, see the layout class corresponding to the layout specified.

        1、absolute

        这种方式的布局可以对子元素相对于父级容器控件进行绝对定位，它包含了x、y两个配置项用于定位。

        
        2、accordion
        有的js插件里面accordion都是一个ui控件，但是Ext是通过布局的方式实现的，我们可以用面板控件作为它的折叠项，并且还可以用js来翻动活动项。
        
        3、anchor
        这个布局就是表单面板默认支持的，每一项占据一行，支持用anchor配置项分配各个子项的高度和宽度。为百分比时表示当前大小占父容器的百分比，为数字的时一般为负数，表示父容器的值减去差值，剩下的为子项的大小。
        
        4、border
        这个布局可以定义东南西北四个方向的子元素，还有一个居中的子元素，一般用它来做页面整页布局，所以Ext.container.Viewport默认就支持了这个布局方式.
        
        5、card
        这个布局可以像卡片一样的切换每个子元素，各个子元素都会独占父元素的容器空间。我们可以定义翻页按钮来控制当前处于活动状态的子元素。
        
        6、column、fit、form
        fit布局元素会独占全部的容器空间，一般用于只有一个子项的情况。
        
        7、table
        这个布局用表格定位的方式去组织子元素，我们可以像表格一样设置rowspan和colspan。由于table的局限性，所以还是尽量少用
        
        8、vbox
        这个布局把所有的子元素按照纵向排成一列。
        
        9、hbox
        跟vbox类似，只不过变成了横向的。