[ 번역 ] Sencha Touch - Intro to Layouts ( 동영상 ) | Korea Sencha User Group 
 원문 : http : / / docs . sencha . com / touch / 1 - 1 / #!/ video / 15888504 
 번역 : https : / / github . com / KoreaSenchaUserGroup / Lab 1 / issues / 6 
 글쓴이 : 이민호 ( Github : tisohjung ) , 한국 센차 유저 그룹 SenchaCon 번역 팀 
 In Sencha Touch the basic building block for creating an interface is the panel . Each panel can display html content or it can be treated as a container to hold other panels . Sencha Touch provides two distinct mechanisms for positioning panels with respect to their containers . You can either dock a panel , so that it sticks to one of the edges of its container , which is ideal for creating toolbars , or you can use a layout that will handle the positioning of one or more panels . 
 센차 터치 에서 인터페이스 를 만드 는 기본 적 인 구조 는 ‘ panel ’ 입니다 . 각 panel 은 html 문서 를 표시 할 수 있 으며 다른 panel 을 포함 하 는 컨테이너 가 될 수 있 습니다 . 센차 터치 는 panel 과 컨테이너 의 관계 에 있 어서 두 가지 의 서로 다른 메커니즘 을 제공 합니다 . panel 을 컨테이너 에 처음 이나 끝 에 넣 어서 이상 적 인 툴바 를 만들 거나 , 하나 이상 의 panel 위치 를 조절 하 는 레이아웃 에 쓸 수 있 습니다 . 
 The layouts work either by neatly arranging inner panels to use the available space or by just showing one panel at a time and providing someway of changing the focus between panels . in this screen cast i will demonstrate each of the different layout types than go on to show how they can be combined in anyway you can think of . 
 레이아웃 은 내부 panel 들 이 공간 을 잘 차지 하 게 깔끔히 배열 하 거나 , panel 을 한 번 에 하나 씩 보여 주 며 시점 변화 를 조절 합니다 . 이 화면 에서 는 각각 의 다른 layout 종류 를 시연 하 고 더 나아가 혼합 해서 쓰 는 것 을 보여 드리 겠 습니다 . 
 0 : 54 layout : auto 
 The default layout type is auto . This causes a panel to behave much like a regular block level element in a html document . The panel will fill the entire available width , but it will only occupy as much height as is required to accommodate the content . 
 레이아웃 의 디폴트 값 은 ‘ auto ’ 입니다 . 이것 은 panel 을 하여금 블록 단위 의 html 요소 처럼 동작 하 게 합니다 . panel 은 가로 로 가능 한 크기 를 모두 차지 하 지만 , 세로 로 는 필요 한 만큼 만 차지 합니다 . 
 1 : 11 Layout : fit 
 if you want to make a panel fill the entire available space , you can use the fit layout type . As u can c , this causes the panel to stretch vertically as well as horizontally . The fit layout is perfect , if u only want to add a single component to a panel . But it won ’ t work if u add any additional component after that . 
 만일 panel 이 모든 공간 을 차지 하 게 하 기 원하 면 , fit layout 을 사용 하 시 면 됩니다 . 여기 에서 볼 수 있 듯이 , panel 이 세 로 가로 모든 영역 을 차지 하 는 것 을 볼 수 있 습니다 . fit layout 은 panel 에 하나 의 요소 만 을 넣 기 원할 때 적합 합니다 . 추가 적 인 구성 요소 를 넣 게 되 면은 작 동시 문제 가 생깁니다 . 
 01 : 32 Layout : card 
 The card layout is similar to fit in that it only displays a single panel at a time . Where as the fit layout can only accept a single item , the card layout will accommodate multiple components . In this example i have deliberately assigned the “ rootPanel ” to a global variable , so that i can access it in the javascript console . The root panel uses a card layout and contains 3 items “ red , amber , green ” panels . If we look at it in the browser , u ’ ll c that only the first component is visible . 
 card layout 은 하나 의 panel 만 보여 주 는 점 에 있 어서 fit 와 비슷 합니다 . fit layout 은 한 가지 아이템 을 수용 할 수 있 는 반면 , card layout 은 여러 개 의 요소 를 수용 할 수 있 습니다 . 이 예제 에서 는 rootPanel 을 자바 스크립트 콘솔 에서 접근 하 기 위해 의도 적 으로 전역 변수 로 할당 했 습니다 . rootPanel 은 card layout 을 쓰 며 , 3 개 의 아이템 인 “ red , amber , green ” 패널로 구성 되 있 습니다 . 브라우저 를 보 면은 , 첫 번 째 요소 가 보이 는 것 을 알 수 있 습니다 . 
 But if i open the console i can manipulate the rootPanel programmatically calling rootPanel . setActiveItem ( 1 ) will reveal the amber panel , and calling rootPanel . setActiveItem ( 2 ) will reveal the green panel . The card layout provides a programmatic interface for switching focus between panels . But it doesn ’ t provide a user interface . In sencha touch there are two specialized kinds of panel that do provide a user interface to the card layout , the Carousel , and the TabPanel . So lets have a look at these . 
 콘솔 을 열 면 rootPanel 을 조작 해서 rootPanel . setActiveItem ( 1 ) 을 하 면 amber 패널 을 , rootPanel . setActiveitem ( 2 ) 를 하 면 green 패널 이 보이 는 것 을 볼 수 있 습니다 . card layout 은 패널 간 에 초점 을 전환 하 기 위한 프로그래밍 인터페이스 를 지원 합니다 . 하 지만 UI ( 유저 인터페이스 ) 는 지원 하 지 않 습니다 . 센차 터치 에 는 두 가지 UI 를 지원 하 는 panel 이 있 습니다 . Carousel 과 TabPanel 입니다 . 한번 살펴 볼까요 
 02 : 45 TabPanel 
 If i change this panel into a TabPanel , then refresh the page in the browser , u ’ ll c that it has created a tabbed user interface . I can click on each title to activate its corresponding penal . By default the tabPanel will use a slide transition when switching focus . But u can override this values with ‘ fade ’, ‘ slide ’, ‘ flip ’, ‘ cube ’, or ‘ wipe ’. Where as a regular panel allows u to specify the layout , the tabPanel requires a layout of ‘ card ’. So if you try to set it to anything else , the value will just be ignored . I still have access to the setActiveItem function . And i can use this to change the inner panels programmatically . 
 제 가 이 panel 을 TabPanel 로 바꾸 고 , 브라우저 를 새로 고치 면 , 탭 형식 의 유저 인터페이스 가 생긴 것 을 볼 수 있 습니다 . 각각 의 이름 을 클릭 해서 각 패널 을 활성 화 시킬 수 있 습니다 . 디폴트 값 으로 tabPanel 은 슬라이드 형식 의 화면 전환 을 사용 합니다 , 하지만 ‘ fade ’, ‘ slide ’, ‘ flip ’, ‘ cube ’, or ‘ wipe ’ 등 으로 재정 의 할 수 있 습니다 . 일반 panel 에서 는 layout 을 설정 할 수 있 는 반면 , tabPanel 은 ‘ card ’ 형식 의 layout 만 을 사용 할 수 있 습니다 . 때문 에 다른 것 으로 재정 의 해도 값 이 무시 될 것 입니다 . 여전히 setActiveItem 함수 는 사용 할 수 있 으며 , 내부 패널 간 의 전환 을 콘솔 을 통해 할 수 있 습니다 . 
 03 : 33 Carousel 
 Now i ’ m going to switch the tabPanel for a Carousel , and refresh the page in the browser . Again this uses a card layout , so only one panel is visible at a time . But instead of using tab to switch , I can just swipe from side to side . Notice too have the indicator at the bottom gives a sense of how many panels there are , and which page u r on . By default the carousel works horizontally . But the direction parameter can be set to either horizontal or vertical . 
 이번 에 는 tabPanel 에서 Carousel 로 바꿔 보 고 브라우저 에서 새로 고침 해 보 겠 습니다 . 전 과 같이 card layout 을 사용 했 기 에 하나 의 패널 만 이 보이 는 것 을 알 수 있 습니다 . 하지만 탭 을 이용 해 화면 을 전환 하 지 않 고 스 와이프 를 통해 전환 할 수 있 습니다 . 아래 부분 에 는 몇 개 의 페이지 가 있 고 현재 몇 번 째 페이지 에 있 는지 표시 가 되 있 는 걸 볼 수 있 습니다 . 디폴트 값 으로 carousel 은 수평 이동 합니다 . 하 지만 direction 변수 를 이용 해 바꿀 수 있 습니다 . 
 04 : 10 Boxlayout 
 So far i ’ ve shown that the fit layout is suitable for a single panel , and that the card layout can hold multiple panels , but it will only display one at a time . So what if you want to display more than one panel simultaneously ? Thats when the HBox and the VBoxLayouts come in . 
 여기 까지 하나 의 패널 에 는 fit layout 이 적합 하 다고 , card layout 은 한 번 에 하나 씩 밖 에 보여 주 진 않 지만 여러 개 의 패널 을 가질 수 있 다는 것 을 보여 드렸 습니다 . 그렇 다면 여러 개 의 패널 을 동시 에 보여 주 려면 어떻게 할까요 ? 바로 hbox 와 vbox 레이아웃 을 사용 하 면 됩니다 . 
 Here i ’ m going to switch the card layout for “ vbox ” . When i refresh the browser , u ’ ll c that all three panels r visible . But they only occupy as much height and width as their contents requires . To make the panels use all available horizontal space , i can set the align parameter to “ stretch ” . This makes it look just the same as if layout was set to auto . But the vbox layout offers much more control over where components occupy vertical space . The pack perimeter is set to the “ start ” by default . 
 여기 에 card layout 을 vbox 로 교체 해 보 겠 습니다 . 브 라우 져 를 새로 고치 면 , 3 개 패널 이 다 보이 는 것 을 알 수 있 습니다 . 하지만 내용 이 필요 한 만큼 의 넓이 와 높이 만 가지 게 됩니다 . 패널 의 넓이 를 꽉 채우 기 위해서 는 align 변수 에 “ stretch ” 를 지정 해 주 면 됩니다 . 이제 보 시 면은 layout 이 auto 였을 때 와 같 아 졌 을 겁니다 . 하 지만 vbox layout 은 세로 영역 에 대해 더 많 은 제어 를 제공 합니다 . pack 변수 는 디폴트 값 으로 start 로 되 어 있 습니다 . 
 But it can also take the values “ center ” and “ end ” . This affects the vertical positioning of the panels . U can control the vertical height of each individual panel using the flex parameter . This specifies the proportion of the vertical space that the each panel will occupy . If i set flex to 1 for each panel , they will occupy the same amour of height . 
 하지만 “ center ” 와 “ end ” 값 을 줄 수 있 습니다 . 이것 은 panel 의 세로 위치 를 변경 합니다 . 세로 높이 는 flex 변수 를 이용 해 조절 할 수 있 습니다 . 이것 은 각각 의 패널 이 차지 할 세로 공간 의 비율 을 조절 합니다 . 각 패널 의 flex 값 모두 1 로 설정 하 면 모두 같 은 비율 의 높이 를 차지 하 게 됩니다 . 
 What i ’ ve done here is to specify the value for flex on every panel within the box . But there is a quicker and a dryer way of doing this . which is to create a hash of default values , including the flex parameter . Now i can remove the setting for each individual panel . The vbox layout distributes panels vertically . There is also an hbox layout which arranges panels horizontally . This can also be tweaked using align , pack , and flex parameters . But each one works from left to right , rather than from top to bottom . 
 여기 서 는 모든 패널 의 박스 안 에 flex 값 을 설정 했 습니다 . 하지만 더 빠르 고 쉬운 방법 으로 할 수 있 습니다 . 바로 디폴트 변수 에 해시 값 으로 flex 변수 를 넣 는 것 입니다 . 이제 각각 의 패널 에 있 는 값 을 지워도 됩니다 . vbox 레이아웃 은 세로 로 패널 을 나누 는 반면 hbox 레이아웃 은 가로 로 페널을 배치 합니다 . 이것 역시 align , pack , flex 변수 등 을 이용 해 수정 할 수 있 습니다 . 하지만 각각 을 위 에서 아래 로 정의 하 는 게 아닌 좌 에서 우로 정의 합니다 . 
 06 : 07 Mix & Match 
 Every panel can be treated as a component in itself , or as a container for other panels . so it ’ s possible to nest panels together using different layouts for each one . Here i ’ ve created a root level panel that fills the screen . It contains 3 panels arranged using a vbox layout with align and flex set setup , so as to use all of the available space . The topChanger , centerChanger , and the bottomChanger panels are all carousels , each containing three panels of different colors . 
 모든 패널 은 자기 자신 에 포함 된 요소 로 볼 수 있 으며 다른 패널 을 포함 할 수 있 는 컨테이너 로 도 여길 수 있 다 . 그래서 panel 은 서로 다른 레이아웃 을 이용 해서 서로 를 포함 할 수 있 다 . 여기 서 는 스크린 을 꽉 채우 는 루트 레벨 의 패널 을 생성 했 다 . 이것 은 모든 공간 을 사용 하 기 위한 방법 으로 align 과 flex 가 설정 된 vbox layout 으로 정렬 된 3 개 의 패널 을 포함 한다 . topChanger , centerChanger , 그리고 bottomChanger panel 들 이 각각 3 개 의 다른 색 의 패널 을 포함 하 는 carousels 다 . 
 If we take a look at this in the browser u ’ ll c three strips of colors stretching to fill the available vertical space . That ’ s the vbox behavior . But each colored panel is itself , just one of 3 cards arranged in a carousel . So i can swipe each of these to mix & match the colors . Let ’ s take this to the next level , and switch out the inline styles ( style : ) for classes ( cls : ). 
 브라우저 에서 보 면 , 3 개 의 색줄 이 좌우 로 늘려 져 위아래 화면 은 꽉 채우 는 것 을 볼 수 있 다 . 이것 이 vbox 의 성격 이 다 . 하지만 각각 의 색 은 3 개 의 card 로 된 패널 그 자체 이 다 . 그래서 각각 을 좌우 로 슬라이드 해서 색 을 섞 고 짜 맞출 수 있 다 . 그럼 다음 단계 로 넘어가 서 style 를 cls 클래스 로 바꿔 보 자 . 
 In my style - sheet i ’ ve created rules that apply a background image to each panel in the carousel . i ’ m also using the background - size contain rule which will scale the image to fit when the panels change size . Now when i refresh the browser , i get to switch the head , torso , and the legs of a little monster . i found these illustrations on flickr , and they are distributed under “ creative commons ” license . That means i can remix and redistribute them as long as i give credit to the original artist . So i want to add one more panel containing link to the illustrator ’ s website . let ’ s c what happens if i add this directly to the items array . the vbox layout causes this item to occupy the same amount of vertical space as the three carousels . I ’ d prefer to make the panel containing the credits , take up no more room than it needs to . ideally i just like to stick it to the bottom of the containing panel . This can be achieved by moving the credits panel from the items array to the dockedItems array . setting the dock property to “ bottom ” fixes it to the bottom of its ’ container . And that achieves the desired result . 
 내 스타일 - 시트 에서 는 각각 의 패널 에 들어가 는 carousel 의 배경 이미지 에 적용 될 함수 를 지정 해 줬 다 . 또한 background - size 에 contain 을 적용 시켜 패널 크기 에 변화 에 따라 크기 가 맞 게 했 다 . 브라우저 를 새로 고치 면 , 몬스터 의 머리 , 몸 , 다리 를 바꿀 수 있 는 화면 이 나온다 . 이 이미지 들 은 flickr 에서 찾 았 으며 creative commons 에 저작 권 등록 이 되 있 다 . 이 뜻 은 이미지 의 제작자 크 레딧 을 주 는 대신 가져다 쓸 수 있 다 . 때문 에 제작자 의 웹 사이트 에 링크 를 거 는 panel 을 하나 더 만들 어야 한다 . items 배열 에 바로 집어넣 으면 어떻게 되 는지 보 자 . vbox 레이아웃 은 위 의 3 개 carousel 과 같 은 높이 를 차지 하 는 패널 을 만들 어 준다 . 나 는 크 레딧 패널 에 필요 한 만큼 의 높이 만 을 주 고 싶 다 . 이상 적 으로 패널 의 제일 밑 에 붙이 고 싶 다 . 이것 은 items 배열 에서 credit 패널 을 빼 서 dockedItems 에 넣 는 것 으로 해결 된다 . dock 변수 를 “ bottom ” 으로 정이 하 면 컨테이너 의 하단 에 붙여 준다 . 짜잔 ~ 원 하 는 결과 다 . 
 08 : 17 Outro 
 In practice u ’ ll find that many common interface patterns for building mobile applications r provided by one of sencha touch ’ s more specialized panel types . But the layouts covered in this episode will be a great help on those occasions when u need to build something more of the spoke . 연습 에서 는 센차 터치 의 세부 패널 타입 이 모바일 앱 을 만들 기 위한 많 은 인터페이스 패턴 을 제공 하 는 것 을 볼 수 있 다 . 하지만 위 에서 했 던 내용 은 자주 거론 되 는 것 을 만들 때 에 많 은 도움 을 줄 것 이 다 . 
 « [ 번역 ] Ext JS – Class System 	 » ExtJS 토론 내용 중 하나