Sencha layout 설정
2024. 8. 25. 23:38ㆍJavascript/Sencha
컴포넌트를 수평으로 나열하기
hbox 사용
{
region: 'north',
height: 50,
layout: 'hbox',
items: [
{
width: 200,
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
{
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
]
},화면을 반응형으로 구성
flex 사용
{
region: 'north',
height: 50,
layout: 'hbox',
items: [
{
width: 200,
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
{
flex: 1,
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
]
},상위 컴포넌트의 사이즈와 같게 width, height 처리
{
region: 'north',
height: 50,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
width: 200,
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
{
flex: 1,
bodyStyle: 'background-color:black',
html: '<h2><font color="white"> Home</font></h2>'
},
]
},'Javascript > Sencha' 카테고리의 다른 글
| Sencha 'xtype' 정의 및 호출 (0) | 2024.08.31 |
|---|---|
| Sencha app generate 실행시, 호출 순서 (0) | 2024.08.31 |
| Sencha에서 js 변수 사용하기 (0) | 2024.08.25 |
| Sencha에서 custom component 적용하기 (0) | 2024.08.25 |
| Ext.form.Panel 설정 (0) | 2024.08.03 |