ExtJS 는 많은 위젯을 가지고 있다고 한다.
위젯은 클래스로 구현되어 있다.
이는 메시지박스, 그리드 , 윈도우 , 트리, 폼 및 사용자 인터페이스와 관련된 모든 요소를 포함한다.
이와같은 것들은 대부분 " 컴포넌트 ( component ) " 라 한다.
또한 개발에 도움이 되는 데이터, 유틸리티 및 기타 기본 클래스도 있다.
예를들어 onReady 같은 메서드는 핵심 함수중 하나다.
표를 나타내기 위해 사용한 그리드 같은 특정 사용자 인터페이스 기능을 제공하는 클래스만을 "위젯" 이라고 한다.
1. 다음과 같은 Yes, No, Cancel 위젯 화면을 띄어보도록 합시다~
yes 를 누를지 no 를 누를지 cancle 을 누를지는... -_-;;;; 당신의 선택! ^-^
이 다이얼로그를 닫으려면 우측 상단의 X 버튼을 클릭하거나 사용자가 Esc 키를 누르거나 Cancle 버튼을 클릭하면 된다.
소스코드를 봐 봅시다!
* Ext.onReady : 모든 도큐먼트가 읽혀진 후에 (DOM 로딩이 끝남) 넘겨진 함수를 호출한다.
* Ext.Msg.show : 다이얼로그를 다양한 방식으로 보여주기 위해 사용되는 메서드이다.
여기에는 show 말고도 공통다이얼로그로 사용되는 prompt , alert 및 wait 같은 메서드도 있다.
extjs3.war다음 예제는 http://localhost:8080/extjs3/ch02_01.html 주소로 돌려 보시면 됩니다 ^^
(이전에 했던 ch01_01.html 도 들어 있습니다)
2. 이번에는 조금 더 코드를 추가하여 Style 을 적용해 보도록 하죠~
다음과 같은 화면의 이미지를 추가해 보겠습니다.
먼저 프로젝트의 구조에 맞게 images 폴더를 하나 추가하여 sencha.png 파일을 넣어 두었습니다
(왜냐고 물으신다면.. 이미지를 삽입하기 위해선 이미지 파일이 필요하니깐요~! ^^)
그리고 난 후 Html 로 돌아와서 head 부분의 안에 style 속성을 정의해 줍니다.
자, 이제 다음과 같이 코드를 더 추가해 보겠습니다.
fn : function ( btn ) 은 사용자가 버튼을 눌렀을 때 경고창을 띄워주는데에만 사용되는 그냥 넣어본 익명 함수 입니다.
fn 에 할당된 함수는 하나의 매개변수 ( 클릭되는 버튼의 이름) 만을 갖습니다.
그래서 사용자가 "Yes" 를 누른경우, 변수는 'Yes' 라는 값을 갖게 됩니다.
클릭되는 버튼의 값을 받아 경고창의 메시지로 그 값을 전달한다.
3. 이번에는 기능을 더 추가해 보도록 합니다.
사용자에게 무언가를 묻는 다이얼로그를 만들어 보았다면, 이제는 사용자의 답을 어떻게 처리할지 해 봅시다.
다이얼로그 fn 요소에 함수를 덧붙이고, 각 버튼 클릭에 대한 처리방향을 결정합니다.
"switch" 구문은 각각의 경우에 대한 처리 방식을 관리해 줍니다.
다음과 같이 질문에 따라 Yes , No , Cancel 을 눌렀을때 각각 다른 처리를 해 보도록 하겠습니다.
* No 버튼 선택시 : 경고창
* Yes 버튼 선택시 : 프롬프트 (prompt) 창
* Cancel 버튼 선택시 : 진행막대 ( progress bar) 창
(종료시점을 명시 안해주면 계속 실행됨)
Html 파일의 fn 부분을 조금 변경하도록 하겠습니다.
다음과 같이 변경합니다.
보시면, 빨간 네모 박스는 다이얼로그 창의 Title 부분이고, 파란색 밑줄은 안의 내용 부분 입니다.
wait 함수는 다른것들과 반대입니다 ^^
간단히 설명하자만 yes 가 들어오는 경우 prompt 창을 띄우고
no 가 들어오는 경우 alert 창 을,
cancel 이 들어오는 경우에는 progress bar 창 을.. 띄우는 함수를 만들어 본 겁니다.
자, 1개의 war 파일을 올려 두었으니, 나머지껀 몇줄 안되서 직접 코딩해 보시라고 파일 올려 드리지 않습니다.
별로 어렵지 않아요~ 영타도 늘 겸 따라 쳐 보아요~!
'JavaScript > ExtJs' 카테고리의 다른 글
| [ExtJS 3] 6. Ext.Panel 클래스 (0) | 2011.08.21 |
|---|---|
| [ExtJS 3] 5. Ext.get 함수와 Ext.fly 함수 (1) | 2011.08.21 |
| [ExtJS 3] 3. ExtJS 환경설정 객체란? (0) | 2011.08.07 |
| [ExtJS 3] 2. ExtJS 라이브러리 사용 alert 창 띄우기 (3) | 2011.08.05 |
| [ExtJS 3] 1. ExtJs 라이브러리 다운받기 (3) | 2011.08.02 |
