1. [ ExtJs의 Layout의 종류 (Absolute, Accordion, Border, Box, Card, Center, Column ]
1-1 [ Absolute ]
Ext.layout.container.Anchor클래스의 고정을 계승하고, 표준적인 x/y축의 config옵션을 이용하여 X/Y좌표로 위치 결정을 위한 기능을 추가한 레이아웃
Ext.onReady(function (){
Ext.create("Ext.container.Viewport", {
layout : 'border',
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
title : 'panel',
border : true,
flex : 1,
region : 'center',
items : [{
xtype : 'panel',
width : 300,
height : 300,
layout : 'absolute',
x: 100,
y : 100,
title : "absoulte"
}]
}]
})
})
JavaScript
복사
1-2 [ Accodion ]
하나의 패널에서 확대할 수 있도록 확장가능한 아코디언 스타일로 여러개의 패널을 관리하는 레이아웃
Ext.onReady(function (){
Ext.create("Ext.container.Viewport", {
layout : 'accordion',
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
title : 'first-Panel',
border : true,
region : 'north',
flex : 1,
html : '첫번째 아코디언'
},
{
xtype : 'panel',
title : 'second-Panel',
region : 'center',
border : true,
flex : 1,
html : '두번째 아코디언'
},
{
xtype : 'panel',
title : 'third-Panel',
region : 'center',
border : true,
flex : 1,
html : '세번째 아코디언'
},
{
xtype : 'panel',
title : 'fourth-Panel',
region : 'center',
border : true,
flex : 1,
html : '네번째 아코디언'
}]
})
})
JavaScript
복사
1-3 [ border ]
하나의 패널에 여러개의 중첩되는 패널이 존재하며, 확대 및 축소에 대한 자동바를 지원하는 멀티 윈도우 레이아웃, 어플리케이션 제작에 자주 사용되는 UI 레이아웃 스타일
Ext.onReady(function(){
Ext.create("Ext.container.Viewport", {
layout : 'border',
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
title : 'North',
region : 'north',
border : true,
flex : 1,
split : true,
},
{
xtype : 'panel',
region : 'center',
border : true,
flex : 1,
spilt : true,
layout : 'border',
items : [{
xtype : 'panel',
title : 'west',
region : 'west',
flex : 1,
border : true,
split : true
},{
xtype : 'panel',
title : 'center',
region : 'center',
flex : 1,
border : true,
split : true
},{
xtype : 'panel',
title : 'east',
region : 'east',
flex : 1,
border : true,
split : true
}]
},{
xtype : 'panel',
title : 'South',
flex : 1,
border : true,
split : true,
region : 'south'
}
]
})
})
JavaScript
복사
1-4 [ Card ]
여러개의 자식 컴포넌트를 임의의 시점에 표시할 수 있는 레이아웃입니다. 레이아웃 스타일은 가장일반적인 클래스를확장하거나 프로그램 설치화면인 마법사 또는 탭의 구현에 사용되는 레이아웃입니다.
Ext.onReady(function(){
Ext.create('Ext.container.Viewport', {
layout : 'border',
renderTo : Ext.getBody(),
items : [{
layout : 'card',
title : 'card',
region : 'north',
tbar : [{
text : 'Before',
handler : function(btn){
//if has before component
if(btn.up('panel').getLayout().getPrev()){
//card layout change(before page)
btn.up('panel').setActiveItem(btn.up('panel').getLayout().getPrev());
}else {
Ext.toast({
html : 'First-Page',
width : 200,
align : 't',
closable : false
})
}
}
}, {
text : 'Next',
handler : function(btn){
//if has next component
if(btn.up('panel').getLayout().getNext()){
//card layout change (Nextpage)
btn.up('panel').setActiveItem(btn.up('panel').getLayout().getNext());
}else {
Ext.toast({
html : 'Last-page',
width : 300,
align : 't',
closable : false
})
}
}
}],
items : [{
xtype : 'panel',
title : '첫번째',
html : "첫번째"
},
{
xtype : 'panel',
title : '두번째',
html : "두번째"
},
{
xtype : 'panel',
title : '세번째',
html : "세번째"
}]
}]
});
})
JavaScript
복사
1-5 [ Center ]
컨테이너 안의 컨텐츠를 중심으로 사용, Fit 레이아웃의 sub클래스로 CenterLayout은 한개의 아이템을 가진다. 여러개일 경우 중복배치가 되어 마지막 자식 컴포넌트만 화면에 출력
Ext.onReady(function (){
Ext.create("Ext.container.Viewport", {
layout : 'center',
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
width : 300,
height : 300,
title : 'Center-Layout',
items : [{
xtype : 'button',
text : '버튼',
x: 130,
y : 120
}]
}]
})
})
JavaScript
복사
1-6 [ Column ]
% 또는 고정폭으로 지정하여 여러개의 열형식의레이아웃을 작성하기 위한 최적의 레이아웃스타일이지만, 높이는 컨텐츠에 의거하여 변화하는는것이 허용
Ext.onReady(function(){
Ext.create("Ext.container.Viewport", {
renderTo : Ext.getBody(),
items : [{
xtype : 'panel',
title : 'column-layout',
width : 150,
height : 150,
layout : 'column',
items : [{
title : 'column!!',
columnWidth : 0.33,
items : [{
xtype : 'button',
text : 'button1'
}]
},{
title : 'column2',
columnWidth : 0.33,
items : [{
xtype : 'button',
text : 'button1'
}]
}, {
title : 'column3',
columnWidth : 0.34,
items : [{
xtype : 'button',
text : 'button3'
}]
}]
}]
})
})
JavaScript
복사
