[ExtJS 3] 9. ExtJS Form 예제 만들기 (버튼, 이벤트)

8. ExtJS Form 예제 만들기에 이어 조금더 추가된 Form 을 만들어 보겠습니다!
(몇가지 안되요 ㅎㅎ)

1. 사용자가 장르의 새로운 장르를 선택하였을때 prompt 가 뜨도록 만들어 보겠습니다.

2. 다음은 Form 을 생성하였으면, Submit 을 날리거나, 초기화 하는 이벤트가 발생하기 위해서 버튼을 만들어 보겠습니다.

---

1. 장르의 새로운 장르를 추가하여, Prompt 창을 띄우도록 합니다

콤보박스에 불뤼어 지는 예제 데이터에 0 , '새로운 장르' 라는 항목을 추가하도록 합니다.

1. /*******************************************************************************
2. * combo box 를 만들기 위한 예제 데이터
3. *******************************************************************************/
4. var genres = new Ext.data.ArrayStore({
5.      fields : ['id', 'genre_name'],
6.      data : [['0','새로운장르'],['1','코미디'] , ['2','드라마'],['3','액션']]
7. });

그리곤 combo 의 listeners 라는 옵션을 추가하여 정의해 줍니다.

* listeners 란 옵션은
특정 이벤트(필트값이 변경되는 등, 사용자에 의한 이벤트 or 컴포넌트의 생성 ,삭제에 따른 코드에 의한 이벤트)
발생으로 호출되는 이벤트 처리를 합니다.

바로 11번째 줄의 listeners 라는 속성이 추가 되었네요... ^^

1. {
2.      xtype : 'combo',
3.      hiddenName : 'genre',
4.      fieldLabel :'장르',
5.      mode : 'local',
6.      store : genres,
7.      displayField : 'genre_name',
8.      valueField : 'id',
9.      width : 120,
10.      triggerAction: 'all',
11.      listeners : {
12.           select : function(field, rec , selIndex) {
13.                if(selIndex == 0 ) {
14.                      Ext.Msg.prompt('New Genre', 'Name', Ext.emptyFn);
15.                }
16.            }
17.       }
18. }

=> select : function( 폼필드, 선택된 콤보박스 항목의 데이터 레코드 , 선택된 항목의 인덱스)

이므로 인덱스값이 0 이면, 프롬프트 다이얼로그를 띄우도록 했습니다.

---

2. 저장과 초기화 버튼

버튼 생성은 items 안에 들어가지 않습니다.
items 는 Form 안에 쓰일 여러가지 컴포넌트들을 명시한 것이고,
폼 전체에 대한 저장과 초기화가 들어가야 하기 때문에 buttons 라는 속성은
items 와 같은 위치에 명시해 줍니다 ^^

다음과 같은 구조로 말이죠~! ^-^

1. items : [{
2.       //항목1
3. },{
4.       //항목2
5. }],
6. buttons : [{
7.       //버튼1
8. },{
9.       //버튼2
10. }]

저장과 초기화 소스는 다음과 같습니다.

1. buttons:[{
2.      text:'저장',
3.      handler : function(){
4.            movie_form.getForm().submit({
5.                  success:function(form, action) {
6.                        Ext.Msg.alert('성공','잘 처리되었습니다');
7.                  }, failure : function(form, action) {
8.                        Ext.Msg.alert('경고','오류!');
9.                  }
10.            });
11.      }
12. },{
13.       text:'초기화',
14.       handler : function(){
15.             movie_form.getForm().reset();
16.       }
17. }]

submit() 을 호출하여 success 와 failure 는 서버 응답을 처리하기 위한 옵션입니다.

* 서버 응답처리

success : 성공 (true)
failure : 실패 (false)

submit( ExtJS 컴포넌트, ExtJS Action객체)

ExtJS Action 객체 옵션

1. failureType (데이터형 : String) : failure 가 클라이언트 측에서 발생했는지, 서버측에서 발생했는지에 대한 것.
2. response (데이터형 : Object) : 가공되지 않은 서버응답, 유용한 헤더정보도 포함하고 있다.
3. result (데이터형 : Object) : 반환된 응답을 기반으로 가공된 JSON 객체
4. type (데이터형 : String) : 실행된 동작의 형태, submit 또는 load

다음과 같이 failureType 을 체크하여 서버 연결 오류였는지 알수 있고,
result 와 response 속성을 통해 서버측 특정 오류메시지의 상세 내용을 알수 있습니다. ^^

오류메시지에 따른 동작을 결정하는 것도 개발자의 필수 과제중 하나인것 같네요~ ^^

1. failure : function (form, action) {
2.      if(action.failureType == Ext.form.Action.CLIENT_INVALID) {
3.            Ext.Msg.alert("전송할수 없습니다.","유효하지 않은 파일이 있습니다");
4.      } else if (action.failureType === Ext.form.Action.CONNECT_FAILURE){
5.            Ext.Msg.alert("실패","서버연결실패:"+action.response.status+action.response.statusText);
6.      } else if (action.failureType === Ext.form.Action.SERVER_INVALID) {
7.            Ext.Msg.alert("경고",action.result.errormsg);
8.      }
9. }

( 여기서 잠깐,

=== 연산자란?

데이터 타입까지 같아야 true 입니다.

script 에서 4 == "4" 는 true, 4 === "4"  는 false 라고 하네요.

-> antop 의 설명! )


자, 오늘은 여기까지~!
어느정도 기초가 조금씩 쌓아가 지고 있나요?
전 볼때마다 새록새록 한것 같아요 ㅋㅋㅋㅋ
뭐, 하다보면 익숙해 져야 할텐데... 핑계아닌 핑계로 점점 ExtJS 를 접하는 시간이 멀어져 가는것 같네요.
좀 더 분발해야 겠습니다! ^-^
Cheer Up!

다음번에는 메뉴, 툴바에 대해서 보도록 합시다~!