HW2 : Sencha Touch 2 Components 를 활용하기

HW1 에 이어서 진행이 됩니다. 이 점 유념하시구요! 

이번 과제는 과제 난이도가 조금 있습니다. 그래서 쉽지만은 않은 과제 입니다. 하지만 중요한 것 위주로 구성한 과제이기 때문에 꼭 성공하셨으면 좋겠습니다. 

(문제가 어려워서 힘들어도 꼭 부딪쳐서 잘 해결하셨으면 좋겠습니다. 왜냐하면,, 지금 고생하나 나중에 고생하나 고생은 매 한가지 이니까요.)

이번 과제는 1번 과제를 수행하셨다면 완성하셨을 내용에 새로운 것을 추가 하는 겁니다.

추가되는 사항은, 

1. title bar 에 버튼 넣기. 그리고 해당 버튼을 눌렀을 때 알람 메세지 띄우기

2 Home panel 에 새로운 panel 추가 또는 삭제 하기.

part 1. title bar 에 버튼 넣기

위에 보시면 빨간색 친 박스 처럼 버튼 하나가 추가 된 것이 보일 겁니다. 이 때 버튼을 클릭하면 아래와 같이 알림창을 띄워 줘야 합니다.

첫 번째 과제를 잘 해내셨으면 title bar 가 Main.js 파일에 있을 것입니다. 

이 파일에서 어느 부분을 고쳐야 할 지는 여러분이 찾아내셔야 합니다. (힌트라면, 버튼이 title bar 안에 포함되 있다는 것입니다.) 조건이 있습니다. 

버튼을 추가할 때 xtype 을 활용하여 추가해주십시오. 또 버튼을 눌렀을 때 event 가 발생하는데 그 event 를 handling 해 주어야 합니다. 이 전 블로그를 잘 참고하시면 어떻게 핸들링 해야 할 지 아실 수 있을 겁니다. (listeners 가 기억 나시나요??)

알람 메세지를 띄우는 방법은 Ext.Msg 를 검색해 보세요. alert, prompt 등등 여러가지가 있는데 우리 상황에 가장 맞는 것이 무엇인지 찾아보고 API 에서 명시한 대로 사용하시면 됩니다.

여기 까지가 이번 과제의 part 1 이구요, part 2 는 더 어렵습니 흐엉~ 

혹시 스터디 할 때 이벤트 부분 제대로 설명 안해줬다 싶으면 다시 해드리겠슴돠.

part 2. run time 때 Panel 에 item 추가/삭제 하기.

요게 좀 어려울 겁니다. 음.. 처음에 자세하게 썼다가 지금 지웠습니다. 너무 자세하게 쓰는 게 나중을 생각해서는 공부하시는 분들에게 별로 도움이 안될 것 같습니다. 일단 한번 부딪혀 보시고 안되면 질문 해주세요. 먼저 결과 화면을 보시죠.

위의 사진은 처음 화면에서 add panel 버튼을 두 번 눌렀을 때 모습 입니다. 

즉, add button 을 누를 때 마다 동일한 자기 소개 내용이 계속 추가가 되어야 합니다.

반대로 remove panel 버튼을 누르면 추가한 것들이 하나씩 삭제 되야 합니다. 

여기서 중요한 것은 아무리 삭제 버튼을 많이 눌러도 맨 처음에 있었던 자기 소개 panel 을 삭제가 되면 안됩니다.

위에서 언급한 것 말고도 몇 가지 지켜주셔야 하는 조건이 있습니다.

- add panel 버튼과 remove panel 버튼은 모두 위치가 고정되 있어야 합니다. 

- 스크롤은 상하 좌우 모두 가능해야 합니다. 즉, 위 아래 뿐 아니라 좌 우 로도 스크롤이 가능해야 합니다.

- 모든 추가 되는 panel 들은 등 간격 이어야 합니다.

힌트 : 필요 하지 않을 수도 있습니다. 그러나 제가 이 과제를 미리 할 때는 썼었습니다. up 과 query 메소드 입니다. 힌트는 여기까지 입니다. 나머지는 API 검색하시면서 고민해 보시면서 과제를 해 보시기 바랍니다!!

꼭 권하고 싶은 것이 있습니다 !!

과제를 하다 보면 막힐 때가 있습니다. 막히다가 풀리면, 

"이야! 해냈구나!!"

하고 끝내지 마시고

"어떻게 했었으면 막힌 것을 더 빨리 해결할 수 있었을까?" 

고민해 보시고 나름의 답을 찾아 보시기 바랍니다. 

그렇게 해야 다음 번엔 더 빠른 시간 안에 문제를 해결할 수 있습니다.

시간은 돈으로는 살 수 없지만, 경험으로는 살 수 있습니다.