Extjs学习笔记之七——布局

Panel内部的组件添加多了之后，组件如何排放就成了一个问题，Extjs的Layout就是为了解决这个问题的。其实学习Layout的最好地点就是Extjs的官网的例子 Extjs Layout Browser .

Extjs3.1.0 版本支持17种，下面挑一些重要的简要的说明一下，要看效果，去上面给的链接，不再贴图了。给Panel设置Layout的方法是一样的，就是设置Panel的Layout配置项。

1. AbsoluteLayout

可以通过Panel内部组件的决定位置来布局。通过x,y来指定。

示例用法：

new Ext.Panel({
    layout: 'absolute',
    title: 'AbsuluteLayout',
    renderTo: document.body,
    frame: true,                
    defaultType: 'textfield',
    width: 400,
    height:250,
    items: [{
        x: 0,  y: 5,
        xtype: 'label',
        text: 'Send To:'
    },
    {
        x: 60,  y: 0,
        name: 'to'                 
    }, {
        x: 0,  y: 35,
        xtype: 'label',
        text: 'Subject:'
    }, {
        x: 60,  y: 30,
        name: 'subject'
    },
       {
        x: 0,  y: 60,
        xtype: 'textarea',
        name: 'msg'
                }]
    });

2.AccordionLayout

Accordion的意思是手风琴，顾名思义，这种布局可以向手风琴那样，有的组件张开，有的闭合。这种效果作为侧边栏比较有用。

示例用法：

new Ext.Panel({
    title: 'Accordion Layout',
    layout: 'accordion',
    renderTo: document.body,
    defaults: {               // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout-specific configs go here

        titleCollapse: true,
        animate: true,
        activeOnTop: false
    },
    items: [{
        title: 'Panel 1',
        html: '<p>Panel content!</p>'
    }, {
        title: 'Panel 2',
        html: '<p>Panel content!</p>'
    }, {
        title: 'Panel 3',
        html: '<p>Panel content!</p>'
    }]
    });
});

3. AnchorLayout

这种Layout非常有用，尤其是在布局含有GridView这一类控件的页面的时候，AnchorLayout实际上类似于Winform的form默认的布局方式，不过它仅仅可以固定某一个组件距离页面边框（右边框和底边框）的距离（绝对的像素或者相对比例）。 通过anchor属性设置，anchor属性的设置API文档上解释的十分清楚，就直接摘抄过来了：

anchor : String

This configuation option is to be applied to child items of a container managed by this layout (ie. configured withlayout:'anchor').

This value is what tells the layout how an item should be anchored to the container. items added to an AnchorLayout accept an anchoring-specific config property of anchor which is a string containing two values: the horizontal anchor value and the vertical anchor value (for example, '100% 50%'). The following types of anchor values are supported:

• Percentage : Any value between 1 and 100, expressed as a percentage.

  The first anchor is the percentage width that the item should take up within the container, and the second is the percentage height. For example:

  // two values specified
  anchor: '100% 50%' // render item complete width of the container and
                     // 1/2 height of the container
  // one value specified
  anchor: '100%'     // the width value; the height will default to auto

• Offsets : Any positive or negative integer value.

  This is a raw adjustment where the first anchor is the offset from the right edge of the container, and the second is the offset from the bottom edge. For example:

  // two values specified
  anchor: '-50 -100' // render item the complete width of the container
                     // minus 50 pixels and
                     // the complete height minus 100 pixels.
  // one value specified
  anchor: '-50'      // anchor value is assumed to be the right offset value
                     // bottom offset will default to 0

• Sides : Valid values are 'right' (or 'r') and 'bottom' (or 'b').

  Either the container must have a fixed size or an anchorSize config value defined at render time in order for these to have any effect.

• Mixed :

  Anchor values can also be mixed as needed. For example, to render the width offset from the container right edge by 50 pixels and 75% of the container's height use:

  anchor: '-50 75%'
  

不过我将anchor的第一个属性也就是Offset设置成正数似乎没什么效果，虽然文档中说Offsets : Any positive or negative integer value.

示例用法：

new Ext.Panel({
                layout: 'anchor',
                title:'anchor',
                renderTo: document.body,
                items: [{
                    title: 'Item 1',
                    html: 'Content 1',
                    width: 800,
                    anchor: 'right 20%'
                }, {
                    title: 'Item 2',
                    html: 'Content 2',
                    width: 300,
                    anchor: '50% 30%'
                }, {
                    title: 'Item 3',
                    html: 'Content 3',
                    width: 600,
                    anchor:'-100 50%'
                    }]
            });

4. BorderLayout

BorderLayout通过指定页面上的区域来布局，至少要有一个center区域，然后可以设置west,south,east,north区域，作为辅助的页面。通常适合大型页面的布局，中部为主要功能区，两侧，底部可以作为工具栏。

var myBorderPanel = new Ext.Panel({
                    renderTo: document.body,
                    width: 700,
                    height: 500,
                    title: 'Border Layout',
                    layout: 'border',
                    items: [{
                        title: 'South Region is resizable',
                        region: 'south',     // position for region
                        height: 100,
                        split: true,         // enable resizing
                        minSize: 75,         // defaults to 50
                        maxSize: 150,
                        margins: '0 5 5 5'
                    }, {
                        // xtype: 'panel' implied by default
                        title: 'West Region is collapsible',
                        region: 'west',
                        margins: '5 0 0 5',
                        width: 200,
                        collapsible: true,   // make collapsible
                        cmargins: '5 5 0 5', // adjust top margin when collapsed
                        id: 'west-region-container',
                        layout: 'fit',
                        unstyled: true
                    }, {
                        title: 'Center Region',
                        region: 'center',     // center region is required, no width/height specified
                        xtype: 'container',
                        layout: 'fit',
                        margins: '5 5 0 0'
                        }]
                    });

5. ColumnLayout

 ColumnLayout可以指定面板的宽度，用width指定的是像素，columnWidth指定百分比，必须是0-1之间的数字。也可以两者都用，都用的情况下，百分比是整个页面的宽度减去固定宽度的列剩余的宽度的百分比。

示例用法:

var p = new Ext.Panel({
                   title: 'Column Layout - Mixed',
                   layout: 'column',
                   renderTo: document.body,
                   items: [{
                       title: 'Column 1',
                        columnWidth: .3,
                        html:'<div>Hello World</div>'
                   }, {
                       title: 'Column 2',
                       html:'<div>Hello</div>',
                       columnWidth: .6
                   }, {
                       title: 'Column 3',
                       columnWidth: .1,
                       html:'<div>Hello</div><div>Another Line</div>'
                       }]
                   });

这个用法是和API文档以及官方例子是一样的，但是这些列的宽度确不能随着浏览器大小的改变而改变，每次总要刷新一下才能重新适应新的浏览器宽度。但是官网的例子上确实可以随着浏览器的拖动内部的面板大小也跟着变化的。很奇怪。如果有朋友知道，请指点迷津下。

布局的用法都差不多，就不再继续写下去了。关键是在实际应用中灵活选用。