Extjs2.3相关学习贴士-Layout相关

BODY { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } P { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } DIV { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } TD { FONT-FAMILY:Tahoma; FONT-SIZE:10pt } 布局相关

• 最适应布局-FitLayout

自动填充区域，该布局的items中只有第一项item才会被显示，其他的因为被覆盖所以无法显示。

在FitLayout中的Grid不要使用autoHeight:true属性，否则Grid将因为重新计算高度导致显示问题。

边框布局 - BorderLayout

1. Center部分是不可以缺少的即region:'center'是使用该布局必须的区域
2. 四个子区域为上下左右，上下区域可以调整高度，左右可以调整宽度，中间区域是通过计算得出的。
3. 使用split可以让用户自行调整子区域大小，当然也可以设置最小和最大高（宽）度

items:[

   {region:'west',html:'west',width:100,split:true,maxSize:120,minSize:80},

   {region:'center',html:'center'}

]

子区域可以通过设置collapsible属性使其可以展开和折叠

 

伸缩菜单布局-Accordion

1.  
   1. titleCollapse是否点击标题可以展开和关闭子面板
   2. animate展开和折叠时是否有动画
   3. activeOnTop，执行展开和折叠操作后，子面板顺序不会改变，如果为true则激活的总是在最上

accordion中的子面板都需要有title属性

 

使用了accordion布局以后，需要设置layoutConfig配置项目：

                   layoutConfig:{
                                titleCollapse:true,
                                animate:true,
                                actioveOnTop:false
                                }

操作向导布局-CardLayout

http://www.cnblogs.com/yjmyzz/archive/2008/09/02/1281869.html

控制位置和大小的布局-AnchorLayout和AbsoluteLayout

1. Anchor中使用百分比：anchor:'50% 50%'
2. Anchor中使用设置边距：anchor:'-50 -100'
3. Anchor中使用side方式设置:anchor:'r b'
4. Anchor中组合配置形式:anchor:'-200 60%'

表单专用的布局FormLayout

分列式布局-ColumnLayout

设置columnWidth:(0~1)

表格装布局TableLayout

xtype

• 在布局的items中只可以使用xtype指定组件类型：
• items:[{

xtype:'grid',

store:store,

columns:columns

}]