分類  >  Web前端 >

EXT-layout的用法小結

tags:    時間:2013-12-09 23:26:35
EXT--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>' 				}] 			}); }); 

 

 

6.form:是一種專門用於管理表單中輸入欄位的布局

Ext.onReady(function() {           var win = Ext.create('Ext.Window',{               title: "form Layout",               height: 150,               width: 230,               plain: true,               bodyStyle: 'padding:15px',               items:                {                   xtype: "form",                   labelWidth: 30,                   defaultType: "textfield",                   frame:true,                   items:                    [                       {                           fieldLabel:"姓名",                           name:"username",                           allowBlank:false                       },                       {                           fieldLabel:"呢稱",                           name:"nickname"                       },                       {                           fieldLabel: "生日",                           xtype:'datefield',                           name: "birthday",                           width:127                       }                   ]               }           });           win.show();       });   

 

7.table:按照普通表格的方法布局子元素,用layoutConfig:{columns:3},//將父容器分成3列

Ext.onReady(function(){         Ext.create('Ext.panel.Panel',         {          renderTo:Ext.getBody(),          title:'容器組件',          layout:'table',                 width:500,          height:200,          layoutConfig:{columns:3},//將父容器分成3列          items:[           {title:'元素1',html:'ssssssssss',rowspan:2,height:100},           {title:'元素2',html:'dfffsddsdfsdf',colspan:2},           {title:'元素3',html:'sdfsdfsdf'},           {title:'元素4',html:''}          ]         }        );   });  

 

8.column:把整個容器看成一列,然後向容器放入子元素時

Ext.onReady(function() {           var win = Ext.create('Ext.Window',{               title: "Column Layout",               height: 300,               width: 400,               plain: true,               layout: 'column',               items: [{                   title:"width=50%",                   columnWidth:0.5,                   html:"width=(容器寬度-容器內其它組件固定寬度)*50%",                   height:200               },               {                   title:"width=250px",                   width: 200,                   height:100,                   html:"固定寬度為250px"               }                           ]           });           win.show();       });   

 

9.fit:填充整個容器(如果多個子元素則只有一個元素充滿整個容器)

Ext.OnReady(function(){      Ext.create(Ext.create(Ext.panel.Panel',         {          renderTo:'paneldiv',          title:'容器組件',          layout:'fit',          width:500,          height:100,          items:[           {title:'子元素1'},           {title:'子元素2'},           {title:'子元素3'},           {title:'子元素4'},           {title:'子元素5'}          ]         }        );   });  

 

 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網