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'}

  ]

  4. 子区域可以通过设置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
  }]