ExtJs4.1布局

标准布局类

EXTJS提供多种面板布局类来支持面板，以下介绍11种：

1、Auto（自动布局）：采用HTML文档流布局子元素，将布局调用传递给子元素。layout:'auto'；

2、Fit（自适应布局类）：将唯一的子元素充满容器，假如容器存在多个面板，指挥渲染第一个。layout:'fit'；

3、accordion（折叠布局）：概不聚会包含多个子面板，任何时候只有一个字面板打开；每个字面板都有展开和收缩功能；layout:'accordion'；

       activeOnTop-->是否置顶；collapseFirst-->是否第一个被渲染；multi-->是否可以同时展开多个面板；--------》这些默认为false

       animate-->是否展开收缩显示滑动；fill-->是否当前面板是否自动充满父面板空间；titleCollapse-->是否允许点击标题进行展开收缩--》默认true

4、Card（卡片布局）：该布局包含多个子面板，任何时候只有一个子面板处于显示状态。setActiveItem(id或者索引)。layout('card')；

       展示哪个子面板的逻辑需要开发人员完成。获取点击的子面板id方式：var id = panel.layout.activeItem.id

       panel.layout.setActiveItem(id);

5、Anchor（锚点布局）：根据容器大小计算子面板自己位置。layout:'anchor',items:[{anchor:......}]

       百分比：第一个值是父面板宽度百分比；第二个值是父面板高度百分比。只有一个值的话就是宽度，高度默认。

       偏移值：第一个值是距离父面板右边间距；第二个值是距离父面板下面间距。只有一个值的话就是右间距，高度默认。

       参考边：anchor:'r,b',相对于父容器右边和底边的间距进行定位。

6、Absolute（绝对位置布局）：根据X和Y左边定点定位布局。layout:'absolute'

7、CheckBoxGroup（复选框组布局）：

8、Column（列布局）：子面板提供width（整数）和columnWidth（百分比）属性。layout:'column'

       width：是使用整数做像素指定列宽；优先级高于columnWidth

       columnWidth：是使用百分比指定列宽。范围是0~1。除过指定列宽之后主面板剩余宽度的百分比。

9、Table（表格布局）：表格布局开始时就指定列数。表格布局默认：从左到右、从上到下。可以合并列或者行。

10、Border（边框布局）：region属性指定布局位置。north、south、west、east、center

11、Box（盒布局）：又分为HBox（水平盒布局）和Vbox（垂直盒布局）

         公共属性：

          flex：每一个具有flex配置项的子元素会根据当前flex值占有子元素flex和比例调整大小；

          pack：start（左），center（中），end（右）；决定组件放在容器中的位置；

          padding：一个值，应有到所有边；两个值，上下一值，左右二值；三个值，第二个只对应左右。

          HBox的region属性：top：子元素垂直居上；middle：子元素垂直居中；stretch：垂直拉伸充满容器；stretchmax：最大拉伸值。

          VBox的region属性：left：水平居左；center：水平居中；stretch：水平拉伸充满容器宽度；stretchmax：水平拉伸最大值。

使用ViewPort

        Ext.container.Viewport代表浏览器窗口的整个显示区域，将document body作为渲染对象，它会根据蓝蓝其窗口的大小自动调整自

身尺寸大小，在一个页面中只允许出现一个ViewPort实例。一半更常用的是将border的主面板渲染到ViewPort中，以使主面板充满整个

浏览器的显示空间。

        Ext.onReady(function(){Ext.create('Ext.container.ViewPort',{layout:'border'});});

Ext.tab.Panel页签：此页签组件的每个tab都是一个Ext.panel.Panel,同一时刻只有一个tab处于活动状态

        举例：通过items配置项给Ext.tab.Panel中添加页签

         Ext.create('Ext.tab.Panel',{

                  title:'',

                  frame:true,

                  width:250,height:150,renderTo:Ext.getBody(),

                  activeTab:0,

                   items:[{title:'tab标签页一',html:'tab标签一内容'},{title:'tab标签页二,html:'tab标签二内容'},

                                {title:'tab标签页三,html:'tab标签三内容'},{title:'tab标签页四,html:'tab标签四内容'}]

          });

          默认显示标签页一，activeTab设置的0，items的元素序列是从0开始的。