Sencha Touch 2 빠 른 입문 시리즈 (5) -- 레이아웃 (Layouts)

본 고 는 Sencha Touch 2 빠 른 입문 시리즈 색인 에 추가 되 었 습 니 다.http://blog.csdn.net/ardy_c/article/details/7544470
전재 출처 를 밝 혀 주 십시오: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 는 다 중 구성 요 소 를 허용 하 는 내장 이기 때문에 우 리 는 다양한 레이아웃 조합 을 이용 하여 우리 페이지 의 레이아웃 을 완성 할 수 있 습 니 다.어린이 들 이 연습 을 많이 해서 앱 을 어떻게 배치 하 는 지 보면 더욱 아름 답 고 대범 해 집 니 다.