extJs之layout

layout中有absolute,anchor,border,accordion,card,form,table,column,fit这几种，现一一举例：
1.absolute根据字面意思就知道，是根据具体坐标进行定位的，固不写相应的代码了，其他的如下

2.anchor:其值可以使百分比和数值，数值一般为负数，其代表的意思是如果宽度和长度中有一个设定值了，则anchor代表的是未设置的那个，如果两者都没有设定具体值，则如果需要使用anchor则需要anchro:'ww,hh' 

Ext.onReady(function() {  
       Ext.create('Ext.Window',{
		title:'Anchor layout',
		width:400,
		height:400,
		layout:'anchor',
		plain: true,
		items:[
			Ext.create('Ext.panel.Panel',{
				title:'panel1',
				height:100,
				anchor:'-50',
				html:'高度等于100，宽度= 容器宽度-50'
			}),
			Ext.create('Ext.panel.Panel',{
				title:'panel2',
				height:100,
				anchor:'50%',
				html:'高度等于100，宽度=容器的宽度*50%'
			}),
			Ext.create('Ext.panel.Panel',{
				title:'panel3',
				anchor:'-10,-200',
				html:'高度等于容器高度-10,宽度等于容器宽度-200'
			})
		]
		
	}).show(); 
    }); 

3.border:将容器分为五个区域:east,south,west,north,center

Ext.onReady(function(){
         var tab = Ext.create('Ext.tab.Panel',{
		region:'center',//border布局，将页面分成东，南，西，北，中五部分，这里表示TabPanel放在中间  
		margins:'3,3,3,0',
		activeTab:0,
		defaults:{
			autoScroll:true
		},
		items:[{
			title:'tab1',
			html:'第一个tab内容'
		},{
			title:'tab2',
			html:'第二个tab内容'
		},{
			title:'tab3',
			html:'第三个tab内容'
		}]
		
	})
	var nav = Ext.create('Ext.panel.Panel',{
		title:'navigation',
		region:'west',
		split:true,
		width:200,
		collapsible:true,//允许伸缩
		margins:'3,0,3,3',
		cmargins:'3,3,3,'
	});
	Ext.create('Ext.Window',{
		title:'Layout Window',
		width:600,
		height:350,
		closable:true,
		border:false,
		plain:true,
		layout:'border',
		closeAction:'hide',
		items:[nav,tab]
	}).show();
)};

4.accordion:这个风格是手风琴式的，效果是如果 有多个item，则点击其中一个，则展开，其他的则收缩。

Ext.OnReady(function(){  
     Ext.create('Ext.panel.Panel',{
		title:'容器组件',
		layout:'accordion',
		width:600,
		height:200,
		layoutConfig:{animate:false},
		items:[{
		   title:'元素1',html:''
		},{
		   title:'元素2',html:''
		},{
		   title:'元素3',html:''
		},{
		   title:'元素4',html:''
		}]
		
	}); 
}); 

5.card:像安装向导一样，一张一张显示

Ext.onReady(function(){
	var navigate = function(panel,direction){
		var layout = panel.getLayout();
		layout[direction]();
		Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
		Ext.getCmp('move-next').setDisabled(!layout.getNext());
	};
	Ext.create('Ext.panel.Panel',{
				title:'Example Wizard',
				height:500,
				width:400,
				layout: 'card',
				activeItem:0,
				bodyStyle:'padding:15px',
				animCollapse:true,
				renderTo:Ext.getBody(),
				defaults:{
       				 // applied to each contained panel
        			border: false
   				},
				bbar:[{
					id:'move-prev',
					text:'back',
					handler:function(btn){
						navigate(btn.up("panel"),"prev");
					},
					disabled:true
				},'->',{
					id:'move-next',
					text:"next",
					handler:function(btn){
						navigate(btn.up("panel"),"next");
					}
				}],
				items:[{
					id:'card-0',
					html:'<h1>Welcome to the Wizard!</h1>'
				},{
					id:'card-1',
					html:'<p>step 2 of 3 </p>'
				},{
					id:'card-2',
					html:'<h1>Congratulations!</h1><p>Step 3 of  3-complete</p>'
				}]
			});
});