Sencha Touch 2 빠 른 입문 시리즈 (5) -- 레이아웃 (Layouts)
전재 출처 를 밝 혀 주 십시오:http://blog.csdn.net/ardy_c/article/details/7542256
레이아웃 (Layouts) 이 무엇 인지 믿 어도 내 가 여기 서 더 말 할 필요 가 없다.웹 페이지 든 모 바 일 애플 리 케 이 션 이 든 우 리 는 자신의 지면 을 배치 해 야 한다.한편 으로 는 사용자 가 읽 기 편 하도록 하 는 것 이 고, 한편 으로 는 지면 이 아름 답 고 가지런 하기 위해 서 입 니 다. 또한... 여러 가지 이유 가 있 습 니 다. 관심 이 있 는 어린 이 는 스스로 정리 할 수 있 습 니 다 = | |, 주제 와 무관 합 니 다. 여 기 는 말 할 것 도 없고, 여러분 의 시간 을 낭비 하지 않도록 합 니 다.Sencha Touch 2 는 여러분 이 편리 하 게 사용 할 수 있 도록 몇 가지 레이아웃 방식 을 미리 정 의 했 습 니 다. HBox, VBox, Card, Fit, Docking.
H 박스 (수평 박스)
제목 에서 보 듯 이 Hbox (수평 상자) 는 그 안에 있 는 하위 요 소 를 수평 으로 배열 합 니 다.어떻게 이런 배치 방식 을 실현 합 니까?우 리 는 용기 의 layot 속성 을 'hbox' 로 설정 하면 됩 니 다.다음은 간단 한 코드 를 살 펴 보 겠 습 니 다.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
코드 분석:
위의 코드 는 용 기 를 만 들 고 hbox 의 레이아웃 방식 을 사용 합 니 다.두 개의 키 요소 에 각각 속성 flex: 1 과 flex: 2 를 설정 하 였 습 니 다.flex 속성 은 비례 에 따라 이 구성 요소 가 차지 하 는 폭 을 계산 합 니 다.flex 의 계산 방법 은 우리 가 평소에 사용 하 는 백분율 정의 너비 와 약간 다르다.예 를 들 어 여기 서 두 개의 동급 요소 의 flex 값 을 각각 1 과 2 로 정의 했다. 그러면 그들의 전체적인 너 비 는 3 (1 + 2) 이 고 우리 가 평소에 습관 적 으로 사용 하 는 100% 이다.그 다음 에 flex 값 이 1 인 폭 은 1 / 3, 즉 33.33% 이다.flex 값 이 2 인 폭 은 2 / 3, 즉 66.67% 이다.위의 코드 를 통 해 만들어 진 모델 은 다음 과 같 습 니 다.
Hbox
여러분 들 은 우리 의 내용 이 반드시 화면 을 가득 채 울 수 있 는 것 이 아니 라 '왼쪽 정렬', '가운데', '오른쪽 정렬' 등 배열 방식 이 필요 할 수도 있다 고 생각 할 것 입 니 다.네, 괜찮아 요!우 리 는 layot 의 align 과 pack 속성 을 설정 하면 각종 정렬 방식 을 실현 할 수 있 습 니 다.다음 코드 를 실행 해서 효 과 를 볼 수 있 습 니 다.
Ext.application({
name: 'sample',
launch: function() {
var container = Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'hbox',
align: 'start',
pack: 'start'
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'HBox Layout'
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Pack: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setPack('start') }, pressed: true },
{ text: 'Center', handler: function() { layout.setPack('center') } },
{ text: 'End', handler: function() { layout.setPack('end') } }
]
}
]
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Align: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setAlign('start'); }, pressed: true },
{ text: 'Center', handler: function() { layout.setAlign('center'); } },
{ text: 'End', handler: function() { layout.setAlign('end'); } },
{ text: 'Stretch', handler: function() { layout.setAlign('stretch'); } }
]
}
]
},
{ xtype: 'button', text: 'Btn 1', margin: 2 },
{ xtype: 'button', text: 'Btn 2', margin: 2 },
{ xtype: 'button', text: 'Btn 3', margin: 2 }
]
});
var layout = container.getLayout();
}
});
코드 분석:
위의 코드 에서 우 리 는 하나의 데이터 대상 을 layot 에 전송 하여 layot 를 설정 하 는 데 사용 합 니 다.데이터 대상 에는 type, align, pack 이 포함 되 어 있 습 니 다.type 은 어떤 레이아웃 방식 을 사용 하 는 지 설정 합 니 다.align 은 hbox 모드 에서 수직 방향 으로 정렬 하 는 방식 을 말 합 니 다. css 의 vaign 에 해당 합 니 다. 선택 할 수 있 는 값 은 start (시작 단 정렬 / 상단 정렬), center (가운데), end (끝 정렬 / 아래쪽 정렬), stretch (스 트 레 칭, 수직 방향의 공간 을 채 웁 니 다) 가 있 습 니 다.pack 은 hbox 모드 에서 수평 방향의 정렬 방식 을 가리 키 며 css 의 align 에 해당 합 니 다. 선택 할 수 있 는 값 은 start (시작 단 정렬 / 왼쪽 정렬), center (가운데), end (끝 정렬 / 오른쪽 정렬) 가 있 습 니 다.위의 코드 를 실행 하고 각 단 추 를 누 르 면 각 값 이 대응 하 는 효 과 를 볼 수 있 습 니 다.
V 박스 (수직 박스)
VBox 와 H Box 는 매우 비슷 합 니 다. 다른 것 은 배열 의 방향 만 바 꾸 었 을 뿐 다음 코드 를 살 펴 보 겠 습 니 다.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
코드 분석:
이 코드 와 H Box 의 첫 번 째 코드 가 유일 하 게 다른 점 은 바로 이곳 의 layot 가 'vbox' 로 설정 되 어 있 고 다른 것 은 모두 같 습 니 다.이번에 flex 가 계산 한 것 은 너비 가 아니 라 높이 이다.대략적인 효 과 는 아래 그림 과 같다.
VBox
정렬 방식 에 있어 서 H Box 와 약간 차이 가 있 습 니 다. align 과 pack 의 기능 은 정반 대 이지 만 선택 값 은 변 하지 않 습 니 다.align 은 vbox 모드 에서 수평 방향의 정렬 방식 을 가리 키 며 css 의 align 에 해당 합 니 다. 선택 할 수 있 는 값 은 start (시작 단 정렬 / 왼쪽 정렬), center (가운데), end (끝 정렬 / 오른쪽 정렬), stretch (스 트 레 칭, 수평 방향의 공간 을 채 웁 니 다) 입 니 다.pack 은 vbox 모드 에서 수직 방향의 정렬 방식 을 가리 키 며 css 의 valign 에 해당 합 니 다. 선택 할 수 있 는 값 은 start (시작 단 정렬 / 끝 정렬), center (가운데), end (끝 정렬 / 밑 정렬) 가 있 습 니 다.다음 코드 를 실행 하여 효 과 를 보십시오.
var container = Ext.create('Ext.Container', {
fullscreen: true,
layout: {
type: 'vbox',
align: 'start',
pack: 'start'
},
items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'VBox Layout'
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Pack: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setPack('start') }, pressed: true },
{ text: 'Center', handler: function() { layout.setPack('center') } },
{ text: 'End', handler: function() { layout.setPack('end') } }
]
}
]
},
{
docked: 'top',
xtype: 'toolbar',
items: [
{
xtype: 'container',
html: 'Align: ',
style: 'color: #fff; padding: 0 10px; width: 85px;'
},
{
xtype: 'segmentedbutton',
allowDepress: false,
items: [
{ text: 'Start', handler: function() { layout.setAlign('start'); }, pressed: true },
{ text: 'Center', handler: function() { layout.setAlign('center'); } },
{ text: 'End', handler: function() { layout.setAlign('end'); } },
{ text: 'Stretch', handler: function() { layout.setAlign('stretch'); } }
]
}
]
},
{ xtype: 'button', text: 'Btn 1', margin: 2 },
{ xtype: 'button', text: 'Btn 2', margin: 2 },
{ xtype: 'button', text: 'Btn 3', margin: 2 }
]
});
var layout = container.getLayout();
카드 (카드 방식)
많은 정 보 를 표시 해 야 할 때 한 화면의 용량 은 분명히 당신 의 요 구 를 만족 시 키 지 못 할 것 입 니 다. 이때 카드 (카드 방식) 레이아웃 방식 을 선택 할 수 있 습 니 다.카드 방식 은 용기 안에 여러 개의 아 이 템 이 존재 하 며, 매번 그 중 하나만 활성화 하고 이 아 이 템 을 용기 에 채 우 면 나머지 아 이 템 은 숨겨 져 필요 할 때 호출 방법 을 통 해 필요 한 아 이 템 을 활성화 하 는 것 을 말한다.
Ext.application({
name: 'sample',
launch: function() {
var panel = Ext.create('Ext.Panel', {
layout: 'card', //
items: [
{
xtype: 'toolbar', //
docked: 'top', //
items:[ //
{
xtype: 'button',
text: 'First',
handler: function(){
panel.setActiveItem(0); // ,
}
},
{
xtype: 'button',
text: 'Second',
handler: function(){
panel.setActiveItem(1); //
}
},
{
xtype: 'button',
text: 'Third',
handler: function(){
panel.setActiveItem(2); //
}
},
{
xtype: 'button',
text: 'Fourth',
handler: function(){
panel.setActiveItem(3); //
}
}
]
},
{
html: "First Item"
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
]
});
Ext.Viewport.add(panel);
panel.setActiveItem(0); //
}
});
코드 분석:
이상 코드 에 서 는 용기 내부 에 도구 모음 과 네 개의 화면 정 보 를 만 들 었 습 니 다.도구 모음 은 스스로 docked 속성 을 사용 하여 용기 의 맨 위 에 멈 추 었 기 때문에 카드 로 처리 하지 않 습 니 다.뒤에 있 는 네 개의 하위 요소 모듈 은 카드 로 간주 되 며, 정 의 된 순서에 따라 한 배열 에 저장 되 며, 부모 용기 의 setActiveItem (index) 방법 으로 표 시 된 모듈 정 보 를 활성화 합 니 다.한편, toolbar 에 서 는 모든 단추 의 클릭 이벤트 처리 에서 해당 모듈 을 활성화 하 는 방법 을 호출 합 니 다.위의 코드 를 실행 하여 효 과 를 체험 하 세 요.
Fit (자체 적응 방식)
Fit (자체 적응 방식) 은 부모 용 기 를 자동 으로 채 우 는 것 을 쉽게 이해 할 수 있 습 니 다.아래 그림 에서 보 듯 이
Fit
예 를 들 어 너비 200 px, 높이 200 px 크기 의 부모 용 기 는 layot 방식 이 fit 이 고 키 구성 요소 만 있 으 면 이 하위 구성 요소 도 너비 200 px 높이 200 px 입 니 다.이 예 의 실현 은 다음 과 같은 코드 를 참고 할 수 있다.
var panel = Ext.create('Ext.Panel', {
width: 200,
height: 200,
layout: 'fit',
items: {
xtype: 'panel',
html: 'Also 200px by 200px'
}
});
Ext.Viewport.add(panel);
Docking (정차)
용 기 는 다양한 레이아웃 방식 을 사용 할 때 하위 구성 요소 인 Docking (정지) 을 용기 에 있 는 top (위), bottom (아래), left (왼쪽), right (오른쪽) 네 개의 가장자리 에 허용 하고 다른 하위 구성 요소 도 필요 에 따라 크기 를 조정 합 니 다.예 를 들 어 우 리 는 첫 번 째 예 를 수정 합 니 다. 코드 는 다음 과 같 습 니 다.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
docked: 'top',
xtype: 'panel',
height: 20,
html: 'This is docked to the top'
},
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
우 리 는 'panel', docked 'top' 의 panel 을 하위 구성 요소 로 추가 했다.이렇게 해서 원래 의 예 를 바탕 으로 상단 에 멈 춰 있 는 패 널 이 하나 더 나 왔 다.이 패 널 도 일정한 높이 를 차지 하고 있 고, 원래 두 패 널 의 높이 도 자동 으로 줄 어 들 기 때문이다.대략적인 효 과 는 아래 그림 과 같다.물론 위쪽 코드 를 실행 해서 효 과 를 볼 수 있 습 니 다.
docked: 'top'
이제 두 번 째 예 를 수정 해서 docked 가 left 일 때 어떤 효과 가 있 는 지 봅 시다.
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
docked: 'left',
xtype: 'panel',
width: 100,
html: 'This is docked to the left'
},
{
xtype: 'panel',
html: 'message list',
flex: 1
},
{
xtype: 'panel',
html: 'message preview',
flex: 2
}
]
});
이번 에는 docked: 'left' 입 니 다. panel 은 용기 내부 의 왼쪽 에 멈 춰 일정한 폭 을 차지 하기 때문에 다른 두 panel 의 너비 도 자동 으로 좁 아 집 니 다.
docked: 'left'
이상 은 Sencha Touch 2 의 몇 가지 레이아웃 방식 입 니 다.Sencha Touch 2 는 다 중 구성 요 소 를 허용 하 는 내장 이기 때문에 우 리 는 다양한 레이아웃 조합 을 이용 하여 우리 페이지 의 레이아웃 을 완성 할 수 있 습 니 다.어린이 들 이 연습 을 많이 해서 앱 을 어떻게 배치 하 는 지 보면 더욱 아름 답 고 대범 해 집 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.