EXT的layout十二种布局

Posted 2020-08-21

layout的有效值有absolute,accordion,anchor,border,card,column,fit,form和table

 

1.absolute:在容器里面根据所给的坐标定位显示

2.accordion:手风琴的效果，一般用于侧边栏

  代码演示：Ext.onReady(function(){

   var panel=new Ext.Panel({

    renderTo:‘paneldiv‘,

    title:‘容器组件‘,

    layout:‘accordion‘,

    width:500,

    height:200,

    layoutConfig:{animate:false},

    items:[

     {title:‘元素1‘,html:""}

     {title:‘元素2‘,html:""}

     {title:‘元素3‘,html:""}

    ]

}

);

});

3.anchor

   (1) 容器中组件需要指定宽度，能在anchor中指定宽高度

   (2)anchor 值一般是负值或者是百分数，正值是没有意义的

   (3)anchor 必须为字符串

4.border将容器分成了五个区域：east,south,west,north,center

5.card 像安装向导一样是一张一张的显示的

6.column 将容器看成一列，然后向容器放入子元素

7.fit 一个子元素将充满整个容器（如果有多个子元素的话则只有一个子元素充满容器）

8.form 是一种专门用于管理表单中输入字段的布局

9.table 按照普通表格的方法布局子元素，用layoutConfig:{colume:3},这个会将父容器分成3列