[ExtJS 3] 11. ExtJS 버튼 이벤트 및 이벤트 처리 함수

버튼은 좋아 보이는 것 이상의 것을 해줘야 합니다.
handler 옵션은 버튼이 클릭 되었을때 실행되는 함수를 명시 합니다.
handler 옵션은 함수를 추가하는 곳 입니다.

다음과 같이 버튼이 클릭 되었을 때 알림 메시지를 띄워 줄 때  ExtJs에 거의 모든 이벤트 함수에는 첫 매개변수로 이벤트를 보낸 컴포넌트에 대한 참조를 전달합니다. 이것이 이벤트를 발생한 컴포넌트를 쉽게 다룰 수 있게 해줍니다.

1. {
2.     xtype :'button',
3.     text : '버튼',
4.     handler : function() {
5.         Ext.Msg.alert('알림','알림창띄움');
6.     }
7. }

---

* 메뉴 항목 선택 시 콘텐츠 읽어오기

버튼을 이용하여 뭔가를 더 만들어 봅시다.
각 메뉴항목에 helpfile 이라는 환경설정 옵션을 추가하여 이 옵션은 펭지에 어떤 내용의 파일을 로딩 할 것인지 결정하는 사용합니다.

이번에는 다음과 같은 폴더 구조를 이룰 것 입니다.

( html 폴더가 생겼구요.. 이 안에 director.txt , genre.txt, title.txt 파일을 생성합니다)
이번에 돌려볼 파일은 ch04_02.htm 파일입니다.


1. 먼저 다음과 같은 툴바를 생성 합니다.

자, 여기서 helpfile 을 추가함으로써 각 메뉴 항목에 유일한 변수를 저장할 수 있는 방법을 갖게 되었습니다.
여기서는 로딩하고 싶은 파일의 이름을 참조하는 것으로 사용 합ㄴ다.

이제 핵심인 Movies 객체를 정의 합니다.

함수 마지막에 () 를 넣으므로써 클래스를 대신하여 반환할 객체를 즉시 호출 한다는 것 입니다.

Movies 변수는 함수가 반환하는 것을 참조 합니다. (함수를 참조하는 것이 아님)

함수로 부터 반환되는 객체는 세 가지 함수를 포함하고 있습니다.
이 객체의 모든 함수는 변수 helpbody 에 접근할 수 있습니다.
변수가 정의되어 있는 함수 내에 멤버 함수들도 정의가 되어 있기 때문에 이 함수들은 변수를 사용할 수 있지만,
코드 외부에서는 접근이 불가능 합니다. (Scope 벗어남..)

약간은 복잡하지만, 단일 객체의 중요한 능력이라고 하네요...

자, 그러면 이제 돌려 볼까요~

주소는 http://아이피:포트/extjs3/ch04_02.html 입니다.

도움말을 선택하여 장르를 선택해 봅니다.

위에서 만든 html 폴더 안에 genre.txt 파일이 열립니다.

이번엔 도움말 - 감독을 선택하니 director.txt 파일의 있는 내용이 열립니다.

도움말 - 타이틀 을 선택하니 title.txt 파일의 내용이 열립니다.

한가지 말하자면, 이 txt 파일은 웹에서 열리는 것이기에 웹 태그가 먹힙니다.
그래서 enter 를 쳐도 그냥 일자로 나오는 경우엔...
<br/> 태그를 주어 다음과 같이 한줄 아래 친 효과를 볼 수 있습니다

(br 태그가 중요한것이 아니라... html 태그가 먹힌다는 점을 말하고 싶었습니다 ^^)

 

extjs3.war

자, 한번 돌려 봅시다~ ^^
이전 파일들도 들어 있습니다.
혹시나 locale 때문에 오류나신다면..

locale 파일을 삭제하신후.. (이건 뭐, 참조해서 안쓰기만 하기 때문에, 지우시던지, 그냥 냅두시던지 하셔도 무관합니다.)

각 파일의 locale 참조하는 부분을 삭제해 주시면 됩니다.

^^ extJs 는 크롬에서 보시면 디버깅도 쉽게 가능하오니,
ie 보단 크롬으로 사용하시면서 공부하시는게 편할 것 같아요^^
뭐.. 선택은 자유! ^_^

그럼 오늘 하루도 무.사.히... ^^

좀 더 툴바의 강력한 기능이 있지만, 일단 너무 오랜만에 잡는거라 흥미를 잃어가네요...

다음엔 새로운 내용인 ExtJs 의 그리드에 대해서 알아 보도록 할게요.

툴바의 좀 더 알아보시고자 하시는 분들께선 책을 참고 하시거나,
ExtJs API 를 참고하셔서 보시는게 좋을 것 같아요 ^^