[Sencha Touch 2] 하단 툴바와 버튼 뷰 구현

SDK 에서 제공되는 샘플 중
/examples/toolbars/app.js 의 부분 입니다.

최종 목적은 아래와 같이 보여지게 하는것입니다.

Ext.application({
	// 앱 이름
    name: 'bottomToolbarApp',
	// 앱 실행 main() 함수 같은 역할
    launch: function() {
		// 보이는 영역에 구성요소를 추가합니다
        Ext.Viewpot.Add({
            // 뷰팟에 추가되는 구성요소들을 이 안에 기술.
			// 구성요소가 하나면 items: { } 로 해도 됩니다.
			items: [
				// 툴바 구성요소 추가
               {
					// 툴바 형식
					xtype: 'toolbar',
					// 화면의 아래에 붙어있게 합니다. 자바 GUI 구현과 비슷.
					docked: 'bottom',

					// 가로 스크롤 가능하게, 인디케이터(로딩중...아이콘 표시) 불가하게
					scrollable: {
						direction: 'horizontal',
						indicators: false
					}

					// 밝은 색상으로 보이도록
					ui: 'light',

					// 툴바 내부에 구성요소 추가
					items: [
						// 세개의 버튼 Back , Default , Round
						{ ui: 'back', text: 'Back' },
						{ text: 'Default' },
						{ ui: 'round', text: 'Round' },

						// 구분자 - 고정 간격으로 구분짓는 구성요소 넣어주고
						{ xtype: 'spacer' },

						// 한몸에 구성된 3버튼 Option1 | Option2 | Option3
						// Option 2 를 눌려진 상태로 설정합니다.
						{
							xtype: 'segmentedbutton',
							items: [
								{ text: 'Option 1' },
								{ text: 'Option 2', pressed: true },
								{ text: 'Option 3' }
							]
						},

						// 구분자
						{ xtype: 'spacer' },

						// 두개의 버튼
						{ ui: 'action', text: 'Action' },
						{ ui: 'forward', text: 'Forward' },

						// 한몸 3버튼, 위와 다른점은 다중선택 가능하다는것
						{
							xtype: 'segmentedbutton',

							// 다중선택 가능하게
							allowMultiple: true,

							items: [
								{ text: 'Toggle 1', pressed: true },
								{ text: 'Toggle 2', pressed: true },
								{ text: 'Toggle 3' }
							]
						}
					]  //-- 툴바 구성요소들 -->
               } //-- 툴바 -->
            ] //-- 뷰팟 구성요소들 -->
        });  //-- 뷰팟 추가 -->
    }  //-- 앱 실행 -->
});  //-- 앱 -->