[Sencha Touch 2] 상단 툴바와 아이콘 버튼 구현

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

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

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

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

					// 툴바 내부에 구성요소 추가
					items: [
						// iconMask : ture = 값이 false이면 아이콘 색상이 안보입니다.
						// iconCls = 아이콘 이미지의 CSS 클래스명 입니다.
						{ iconMask: true, iconCls: 'action' },
						// ui: 'plain' = 평면 모양. 버튼모양으로 만들지 않습니다.
						{ iconMask: true, iconCls: 'add', ui: 'plain' },
						// text: 지정하면 아이콘 옆에 글자가 함께 나옵니다.
						{ iconMask: true, iconCls: 'action', text: 'Test' },
						// 위와 같은데 평면 모양으로 보입니다.
						{ iconMask: true, iconCls: 'bookmarks', text: 'Test', ui: 'plain' },
						// 둥근모양 버튼
						{ iconMask: true, iconCls: 'download', ui: 'round' }
						// 아이콘에 숫자로 알려주는 뱃지를 붙입니다. iOS 계열에 있는 것.
						{ iconMask: true, ui: 'action', iconCls: 'settings', badgeText: '2' },
						// 스샷에 녹색으로 보이는 버튼입니다.
						{ iconMask: true, ui: 'confirm-round', iconCls: 'compose' },
						// 빨간 버튼
						{ iconMask: true, ui: 'decline', iconCls: 'delete' },
						// 아이콘 정렬을 오른쪽으로, 둥근 버튼, Home 텍스트
						{ iconMask: true, iconAlign: 'right', ui: 'round', text: 'Home', iconCls: 'home' },
						// 스샷에 어두운 파란색 도장모양 아이콘 둥근버튼입니다.
						{ iconMask: true, ui: 'action-round', iconCls: 'locate' },
						// 한몸 3버튼입니다.
						{ xtype: 'segmentedbutton', items: [
							{ iconMask: true, iconCls: 'maps' },
							{ iconMask: true, iconCls: 'organize', text: 'Sort' },
							{ iconMask: true, iconCls: 'refresh' }
						]},
						// Back 버튼 모양을 지니게 합니다.
						{ iconMask: true, ui: 'back', iconCls: 'reply' },
						// 
						{ iconMask: true, iconCls: 'x-icon-mask trash' }
					]  //-- 툴바 구성요소들 -->
               } //-- 툴바 -->
            ] //-- 뷰팟 구성요소들 -->
        });  //-- 뷰팟 추가 -->
    }  //-- 앱 실행 -->
});  //-- 앱 -->