HW3 : Sencha Touch 2 View 사용하기

과제는 저번 과제에 이어서 진행됩니다. 이전 과제를 하지 않으셨으면 현재 과제를 하실 수가 없어요 흐엉 ㅠ

Part 1.  titlebar 를 Ext.define 을 활용하여 따로 정의하기

화면 상 바뀌는 것은 없습니다. 그러나 코드 구조를 바꾸는 겁니다. 이전에 main 에 고정했었던 toolbar 를 따로 Ext.define 을 통해 새로 만드는 겁니다.

이 때 새로 만들 이름은 Sample.view.FontTitlebar 로 줍니다. 

xtype 은 fonttitlebar 로 줍니다.

config 안에는 title 값은 My app 을 default 값으로 가지도록 합니다. 

새로 define 한 것을 사용하기 위해서는 app.js 와 Main.js 를 수정해 줘야 합니다. 

바뀐 뒤에도 원래 처럼 모두 정상 작동해야 합니다.

Part 2. Titlebar 에서 title 글자 크기 바꾸는 버튼 넣기

지난 과제가 어려워서 많이 고생하셨죠?ㅠㅠ 그래도 지난 과제 하셨으면 오늘 과제는 잘 하실 수 있으실 겁니다.

결과 화면. 위의 사진에 비해서 버튼 두 개가 추가 됐고, title bar 높이가 조금 더 커졌고, 그리고 My app 이라는 글자가 좀 더 커졌네요.

bigger 버튼을 누르면 My app 글자 크기가 조금씩 증가해야 하고

smaller 버튼을 누르면 My app 글자 크기가 조금씩 작아져야 합니다.

먼저 titlebar 의 height 는 70 으로 바꿔줍니다. (어디서 바꿔줘야 할까요??)

기존의 titlebar 에는 없는 속성인 fontSize 를 넣어줍니다. (이는 현재 font size 값을 가질겁니다.) default 값으로 1.2 를 줍니다.

바로 앞 스터디에서 프로그래머가 커스텀하게 지정해준 config 는 자동적으로 getter setter 가 생긴다는 사실 기억하고 계셔야 하구요.

Titlebar 에는 내부적으로 Ext.Title 이라는 component 를 가지고 있습니다. 이 component 의 xtype 은 title 입니다. (이걸 언급하는 이유는 사용하셔야 합니다.)

setStyle 이라 메소드를 사용하셔야 합니다. (누가 사용해야 할까요? 그리고 왜 사용해야 할까요? 우리가 지금 하려는 것은 글자 크기를 바꾸려는 것이라는 것이 핵심입니다.)

setStyle 을 쓰기 위해서는 css 를 찾아보셔야 합니다. 링크 겁니다. http://www.w3schools.com/cssref/pr_background-image.asp 여기서 필요한 부분을 찾으셔야 합니다.

글자 크기의 단위는 em 으로 해주세요!

지난 과제 때 썼었던 up 과 query 모두 저는 사용해서 과제를 했습니다. font size 는 무한정 커지는 것은 아니고 2 가 maximum 값입니다. 반대로 0.5 가 minimum 값입니다. 버튼을 눌렀을 때 증감 단위는 0.1 로 해주세요!