ExtJs的layout的12种风格
extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种。
另外几种见：
http://www.sencha.com/deploy/dev/examples/layout-browser/layout-browser.html
里面有详细的例子。


absolute 顾名思义，在容器内部，根据指定的坐标定位显示

accordion 这个是最容易记的，手风琴效果

Java 代码
Ext.onReady(function(){ 
var panel=new Ext.Panel(//Ext.formPanel 就是Panel中用了form布局 
      { 
       renderTo:'paneldiv', 
       title:'容器组件', 
       layout:'accordion',        
       width:500, 
       height:200, 
       layoutConfig:{animate:false}, 
       items:[ 
        {title:'元素1',html:''}, 
        {title:'元素2',html:''}, 
        {title:'元素3',html:''}, 
        {title:'元素4',html:''} 
       ] 
      } 
     ); 
}); 
Ext.OnReady(function(){
var panel=new Ext.Panel(//Ext.formPanel就是Panel中用了form布局
      {
       renderTo:'paneldiv',
       title:'容器组件',
       layout:'accordion',      
       width:500,
       height:200,
       layoutConfig:{animate:false},
       items:[
        {title:'元素1',html:''},
        {title:'元素2',html:''},
        {title:'元素3',html:''},
        {title:'元素4',html:''}
       ]
      }
     );
});


anchor 这个效果具体还不知道有什么用，就是知道注意一下
1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

Java 代码
Ext.onReady(function() { 
        var panel1 = new Ext.Panel({ 
            title: "panel1", 
            height: 100, 
            anchor: '-50', 
            html: "高度等于100，宽度=容器宽度-50" 
        }); 
 
        var panel2 = new Ext.Panel({ 
            title: "panel2", 
            height: 100, 
            anchor: '50%', 
            html: "高度等于100,宽度=容器宽度的50%" 
 
        }); 
 
        var panel3 = new Ext.Panel({ 
         &n