1. [ Collapsible ]
Collapsible이라는 속성은 패널의 바디를 잡고 펼치는 기능을 가진 버튼을 타이틀 우측에 생성하게 해주는 속성, Boolean타입이랑 true/false로 속성을 지정해주면 된다.
선언을 안할 시 default 값은 false이므로 패널에 출력되지 않음
1-1. [ Sample-Code]
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
width : 500,
height : 500,
renderTo : Ext.getBody(),
layout : 'border',
items : [{
xtype : 'panel',
region : 'center',
flex : 1,
title : '연습2',
layout : 'border',
items : [{
xtype : 'panel',
region : 'center',
flex : 1,
collapsible : true,
title : 'collapsible 모드'
}]
}]
})
})
JavaScript
복사
2. [ toolbar 위치 지정하기 ]
toolbar를 위치를 지정하는 법은 2가지가 있다. 첫번째로는 dock 속성을 이용 ,
두번째로는 tbar/bbar/lbar/rbar/fbar를 이용한 방법이다.
두번 째 방법이 간단하고 이해하기 쉬우니 두번째 방법으로 진행하겠다.
•
tbar : top-bar라고 생각하자 상단에 위치하게해준다
•
bbar : bottom-bar 하단에 위치해준다
•
lbar : left-bar 왼쪽에 위치
•
rbar : right-bar오른쪽에 위치
•
fbar : footer-bar 이며 footer에 위치
2-1. [Sample-Code]
Ext.onReady(function() {
Ext.create("Ext.panel.Panel", {
width : 500,
height : 500,
renderTo : Ext.getBody(),
layout : 'border',
items : [{
xtype : 'panel',
region : 'center',
flex : 1,
title : '연습2',
layout : 'border',
tbar : [{
xtype : 'button',
text : 'tbar1'
}, {
xtype : 'button',
text : 'tbar2'
}],
lbar :[{
xtype : 'button',
text : 'lbar1'
}, {
xtype : 'button',
text : 'lbar2'
}],
rbar : [{
xtype : 'button',
text : 'rbar1'
}, {
xtype : 'button',
text : 'rbar2'
}],
bbar : [{
xtype : 'button',
text : 'bbar1'
}, {
xtype : 'button',
text : 'bbar2'
}],
fbar : [{
xtype : 'button',
text : 'fbar1'
}, {
xtype : 'button',
text : 'fbar2'
}],
items : [{
xtype : 'panel',
region : 'center',
flex : 1,
collapsible : true,
title : 'collapsible 모드'
}]
}]
})
})
JavaScript
복사
