[ExtJS 3] 8. ExtJS Form 예제 만들기 (radio, check, textarea, input , date, combo)

한동안 업무에 바빠 회사에서 매일 야근 ㅠ-ㅠ 하느라 포스팅 할 시간이 없네요..

이제는 IT 가 3D (Dangerous , Difficult , Dirty ) 업종이 아니라  4D 라고 하네요..
하나 더 추가된 D 는 Dreamless -_-;;;;;
희망도 없는건가요... ^^;; 하하하-

---

자, 이제는 ExtJS 3 라이브러리를 이용하여 Form 을 만들어 봅시다.

오늘만들 화면은 다음과 같은 화면입니다 ^^

1. 날짜필드,
2. 유효성 검증
3. 오류메시지

>> 알아두기

Ext 컴포넌트 대부분의 환경설정 옵션 이름은 HTML 과 같다.
( Why? Ext는 웹개발자에 의해 웹개발자를 위해 만들어 졌다고 한다 ^^)

1. 다음과 같이 뼈대를 만들어 보도록 합니다.

1. Ext.onReady(function(){
2.      // FormPanel : FORM 요소를 랜더링 하고 하위컴포넌트를 배치하기 위한 레이아웃을 사용하는 특화된 Panel 서브클래스
3.      var movie_form = new Ext.FormPanel ({
4.      // url : 데이터 보내야 하는곳 설정 (renderTo 옵션을 가짐)
5.      url : '',
6.      //renderTo : 이미 존재하는 어떤 요소레 생성한 폼을 덧붙일지를 결정
7.      renderTo : Ext.getBody(),
8.      frame : true,
9.      title : '영화 정보 폼',
10.      width : 650,
11.      /*
12.       * items : 모든 하위 컴포넌트를 명시
13.       * 각 배열요소들은 xtype 옵션을 가진 환경설정 객체
14.       * xtype : 어떤 종류의 ExtJS 컴포넌트가 사용될 것인지 정의
15.       */
16.      items :
17.           [{
19.           }]// end form Panel items
20.      });
21. });

주석으로 자세하게 설명이 되어 있는데요,
이제 width : 650 을 정하므로써 폼의 사이즈는 가로 650이라고 명시를 해 주었습니다 ^^

앞으로 items 안에 모든 하위 컴포넌트를 명시해 줄 것 입니다.
다음과 같은 구조로 코딩이 되겠습니다.

1. items:[{
2.           //항목1
3.      },{
4.           //항목2
5.      },{
6.           //항목3
7.      }]

먼저 제목을 만들어 보겠습니다.


2.  input box 만들기

각 배열 요소들은 xtype 옵션을 가진 환경 객체로 xtype 은 어떤 종류의 Ext JS 컴포넌트가 사용될 것인지 정의합니다.
xtype 은 특정 ExtJS 컴포넌트 클래스와 연관된 문자열 키 (Key) 입니다.

자세한 사항은 ExtJS API 를 참조하시면 됩니다 ^^

 

1. {
2.      xtype : 'textfield',
3.      fieldLabel : '제목', // fieldLabel : 필드의 이름표
4.      name : 'title',// name : 폼데이터가 서버에 보내질때 매개변수 이름으로 사용
5.      allowBlank : false// (유효성검증) 필수값 체크
6. }

* xtype 의 종류

textfield - 텍스트 필드 설정

timefield - 시간 필드 설정

numberfield - 숫자 필드 설정

datafield - 날자 필드 설정

combo - 콤보박스 설정

textarea - Editor (Text 영역) 설정

3. 다음 xtype 을 이용하여 날짜 field 와 유효성 검증을 해 봅시다.

1. {
2.      xtype : 'textfield',// 텍스트 박스 생성
3.      fieldLabel : '감독',
4.      name : 'director',
5.      // vtype : 'alpha' , // (유효성검증) 알파벳 문자로만 구성되는지 확인
6.      // 내장되어있는 유용한 vtype : email , url , alpha, alphanum
7.      vtype : 'name'
8. },{
9.      xtype : 'datefield',// 날짜필드 생성
10.      fieldLabel : '개봉',
11.      name : 'released',
12.      disabledDays : [1,2,3,4,5] // (유효성검증) 그 주의 어떤날짜를 비활성화 하는 옵션
13.      // 일주일은 일요일 (숫자 : 0 ) 으로 시작 ~ 토요일 (숫자 : 6 )
14. }

vtype 옵션을 주어 검증에 대해 오류메시지를 보이고 값을 제한하는데 사용됩니다.

ExtJS API 에 가면 더 많은 vtype 에 대해 찾아 볼 수 있습니다 ^^

disabledDay 옵션을 주어 토요일과 일요일은 비활성화 하였습니다 ^^

3-2.사용자 정의 vtype 을만들어 보겠습니다.

1. /*******************************************************************************
2. * 사용자 정의 vtype 만들기
3. * Exam > 각 단어의 첫 글자는 대문자이고, 한 글자 이상의 문자로 이루어져 있는지 확인
4. *******************************************************************************/
5. Ext.apply(Ext.form.VTypes, {
6.      nameVal : /^[A-Z][A-Za-z]+\s[A-Z][A-Za-z]+$/ , //대조해볼 정규표현식
7.      nameMask : /[A-Za-z]/ , //사용자가 입력값을 제한하기 위한 마스킹
8.      nameText : '감독 이름이 정확하지 않습니다.' , //보여줄 오류메시지
9.      name : function(v) { //실질적인 함수로 위에서 정의한 것을 실제로 사용할수 있게하는 부분
10.      return this.nameVal.test(v);
11.      }
12. });

다음과 같이 유효성 조건에 맞지 않는다면 이렇게 보여 줄 것 입니다 ^^

4. 라디오 버튼과 체크 박스

1. {
2.      /*
3.       * radio 버튼
4.       */
5.      xtype :'radiogroup',//radioBox
6.      fieldLabel : '필름 정보',
7.      columns : 1,
8.      name : 'filmed_in',//HTML 과 유사하게 name 으로 radioGroup 속성을 이용한다.
9.      items:
10.            [{
11.                  name : 'filmed_in',
12.                  boxLabel :'컬러',// radio 버튼 옆의 이름
13.                  inputValue : 'color'// radio 버튼의 값
14.            },{
15.                  name : 'filmed_in',
16.                  boxLabel :'흑백',
17.                  inputValue : 'B&W'
18.            }] //end radio button items
19.       },
    {
20.      /*
21.       * checkBox
22.       * check Box 는 checked 옵션을 가짐. true , false
23.       *
24.       */
25.      xtype : 'checkbox',
26.      fieldLabel : '나쁜영화',
27.      name : 'bad_movid',
28.      checked : true
29.      },
    {
30.      /*
31.       * composite field 를 이용한다.
32.       * 아래 사이트에 다 나와있슴
33.       * http://dev.nerv.kr/ext-3.3.1/docs/?class=Ext.Component
34.       */
35.      xtype : 'compositefield',
36.      fieldLabel : '다중체크',
37.      items : [{
38.                xtype : 'checkbox',
39.                name : 'chk',
40.                boxLabel : 'A'
41.             }, {
42.                xtype : 'checkbox',
43.                name : 'chk',
44.                boxLabel : 'B',
45.                checked: true
46.              }] // end check box items
47.       },
    {
48.       xtype : 'compositefield',
49.      // fieldLabel : '다중체크',
50.       items : [{
51.                    xtype : 'checkbox',
52.                    name : 'chk',
53.                    boxLabel : 'C',
54.                    checked: true
55.               }, {
56.                    xtype : 'checkbox',
57.                    name : 'chk',
58.                    boxLabel : 'D'
59.               }] // end check box items
60. }
    
    

5. 콤보 박스

먼저 콤보박스에 나올 데이터를 미리 하나 만들어 두도록 합니다.

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

items 안에는 다음과 같이 코딩 합니다.

1. {
2. /*
3. * combo Box : 로컬데이터로 미리 로딩해둘 만큼
4. * 작은 리스트거나 자주 변경되지 않을만한 데이터에 좋다
5. * (select box)
6. */
8.      xtype : 'combo',
9.      hiddenName : 'genre',
10.      fieldLabel :'장르',
11.      mode : 'local',// mode : 콤보박스의 항목을 저장소로 부터 미리 로딩 : local
12.      // 서버에 질의하여 동적으로 데이터 로딩 : remote
13.      store : genres,// store : 콤보박스에 제공되는 데이터 저장소
14.      displayField : 'genre_name',// displayField : 각 항목의 텍스트를 제공할 필드를 정하는 옵션
15.      valueField : 'id',// valueField : 각 항목의 값을 제공할 필드를 정하는 옵션
16.      // 이 옵션을 사용하려면 hiddenName 옵션을 명시
17.      width : 120,
18.      triggerAction: 'all'// 이 옵션을 통해 한번 선택 한 후 다시 선택시 보기들이 나올수 있도록 한다.
19. }

6. TextArea 영역과 HTMLEditor

1. {
2. /*
3. * TextArea 영역
4. */
5.      xtype : 'textarea',// 전형적인 HTML 의 textarea 필드와 유사
6.      name : 'description',
7.      hideLabel : true,
8.      height : 100,
9.      anchor : '100%'
10. },{
11. /*
12. * HTML Editor
13. */
14.      xtype : 'htmleditor',// 풍부한 편집 환경을 제공하는 텍스트 편집기
15.      name : 'description',
16.      hideLabel : true,// 왼쪽에 표시되는 레이블을 숨긴다.
17.      height : 100,
18.      anchor : '100%'
19. }

자, 이제 끝났습니다 ^^;
뭐.. 별거 없는데 소스코드를 일일히 나열하니 굉장히 길어 보이네요~

전체적인 HTML 소스는 다음과 같습니다. (필요한 전체적인 흐름만 참조하세요... TAB 간격 정리를 안해두었습니다.)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
 <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
 <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
 <script type="text/javascript" src="extjs/locale/ext-lang-ko.js"></script>
 <script type="text/javascript">
 /*******************************************************************************
 * 오류메시지를 띄울 때 깔끔한 말풍선을 보이기 위해 Ext.QuickTips 객체를 사용
 *******************************************************************************/
 Ext.QuickTips.init();
 /*******************************************************************************
 * 사용자 정의 vtype 만들기
 * Exam > 각 단어의 첫 글자는 대문자이고, 한 글자 이상의 문자로 이루어져 있는지 확인
 *******************************************************************************/
 Ext.apply(Ext.form.VTypes, {
  nameVal : /^[A-Z][A-Za-z]+\s[A-Z][A-Za-z]+$/ , //대조해볼 정규표현식
  nameMask : /[A-Za-z]/ ,       //사용자가 입력값을 제한하기 위한 마스킹
  nameText : '감독 이름이 정확하지 않습니다.' , //보여줄 오류메시지
  name : function(v) {       //실질적인 함수로 위에서 정의한 것을 실제로 사용할수 있게하는 부분
   return this.nameVal.test(v);
  }
 });

 /*******************************************************************************
 * combo box 를 만들기 위한 예제 데이터
 *******************************************************************************/
 var genres = new Ext.data.ArrayStore({
  fields : ['id', 'genre_name'],
  data : [['1','코미디'] , ['2','드라마'],['3','액션']]
 });
 
 /*******************************************************************************
 * Ext 컴포넌트 대부분의 환경설정 옵션 이름은 HTML 과 같다.
 * ( Why? Ext는 웹개발자에 의해 웹개발자를 위해 만들어 졌다고 한다 ^^)
 *******************************************************************************/
  Ext.onReady(function(){
   // FormPanel : FORM 요소를 랜더링 하고 하위컴포넌트를 배치하기 위한 레이아웃을 사용하는 특화된 Panel 서브클래스
   var movie_form = new Ext.FormPanel ({
    // url : 데이터 보내야 하는곳 설정 (renderTo 옵션을 가짐)
    url : '', 
    //renderTo : 이미 존재하는 어떤 요소레 생성한 폼을 덧붙일지를 결정
    renderTo : Ext.getBody(),
    frame : true,
    title : '영화 정보 폼',
    width : 650,
    /*
     * items : 모든 하위 컴포넌트를 명시
     * 각 배열요소들은 xtype 옵션을 가진 환경설정 객체
     * xtype : 어떤 종류의 ExtJS 컴포넌트가 사용될 것인지 정의
     */
    items :
     [{
      /* 
       * xtype : 어떤 필드를 넣을지 지정.
       * xtype 종류
       * textfield , timefield , numberfield , datafield, combo , textarea
       */
      xtype : 'textfield', 
      fieldLabel : '제목', // fieldLabel : 필드의 이름표
      name : 'title',   // name : 폼데이터가 서버에 보내질때 매개변수 이름으로 사용
      allowBlank : false  // (유효성검증) 필수값 체크
     },{
      xtype : 'textfield', // 텍스트 박스 생성
      fieldLabel : '감독',
      name : 'director',
      //vtype : 'alpha' ,  // (유효성검증) 알파벳 문자로만 구성되는지 확인
            // 내장되어있는 유용한 vtype : email , url , alpha, alphanum
      vtype : 'name'
     },{
      xtype : 'datefield', // 날짜필드 생성
      fieldLabel : '개봉',
      name : 'released',
      disabledDays : [1,2,3,4,5]  // (유효성검증) 그 주의 어떤날짜를 비활성화 하는 옵션
             // 일주일은 일요일 (숫자 : 0 ) 으로 시작 ~ 토요일 (숫자 : 6 )
          
     },{
      /*
      * radio 버튼
      */
      xtype :'radiogroup',  //radioBox
      fieldLabel : '필름 정보',
      columns : 1,
      name : 'filmed_in',   //HTML 과 유사하게 name 으로 radioGroup 속성을 이용한다.
      items:
       [{
        name : 'filmed_in',
        boxLabel :'컬러',  // radio 버튼 옆의 이름
        inputValue : 'color' // radio 버튼의 값
       },{
        name : 'filmed_in',
        boxLabel :'흑백',
        inputValue : 'B&W'
       }] //end radio button items
     },{
      /*
      * checkBox
      * check Box 는 checked 옵션을 가짐. true , false
      *
      */
      xtype : 'checkbox',
      fieldLabel : '나쁜영화',
      name : 'bad_movid',
      checked : true
     }, {
      /*
       *  다중체크 박스
       * composite field 를 이용한다.
      */
      xtype : 'compositefield',
      fieldLabel : '다중체크',
      items : [{
       xtype : 'checkbox',
       name : 'chk',
       boxLabel : 'A'
      }, {
       xtype : 'checkbox',
       name : 'chk',
       boxLabel : 'B',
       checked: true
      }] // end check box items
     }, {
      xtype : 'compositefield',
      // fieldLabel : '다중체크',
      items : [{
       xtype : 'checkbox',
       name : 'chk',
       boxLabel : 'C',
       checked: true
      }, {
       xtype : 'checkbox',
       name : 'chk',
       boxLabel : 'D'
      }] // end check box items
     },{
      /*
      * combo Box : 로컬데이터로 미리 로딩해둘 만큼
      *      작은 리스트거나 자주 변경되지 않을만한 데이터에 좋다
      * (select box)
      */
      
      xtype : 'combo',
      hiddenName : 'genre',
      fieldLabel :'장르',
      mode : 'local',     // mode : 콤보박스의 항목을 저장소로 부터 미리 로딩 : local
              // 서버에 질의하여 동적으로 데이터 로딩 : remote
      store : genres,     // store : 콤보박스에 제공되는 데이터 저장소
      displayField : 'genre_name', // displayField :  각 항목의 텍스트를 제공할 필드를 정하는 옵션
      valueField : 'id',    // valueField :  각 항목의 값을 제공할 필드를 정하는 옵션
              // 이 옵션을 사용하려면 hiddenName 옵션을 명시
      width : 120,
      triggerAction: 'all'   // 이 옵션을 통해 한번 선택 한 후 다시 선택시 보기들이 나올수 있도록 한다.
     },{
      /*
      * TextArea 영역
      */
      xtype : 'textarea',    // 전형적인 HTML 의 textarea 필드와 유사
      name : 'description',
      hideLabel : true,
      height : 100,
      anchor : '100%'      
     },{
      /*
      * HTML Editor
      */
      xtype : 'htmleditor',   // 풍부한 편집 환경을 제공하는 텍스트 편집기
      name : 'description',
      hideLabel : true,    // 왼쪽에 표시되는 레이블을 숨긴다.
      height : 100,
      anchor : '100%'     //
     }]// end form Panel items
    });
   });
  
 </script>
</head>
<body>
</body>
</html>

이해가 안가시는 분들께서는 다음 파일을 올려두니, 테스트 하시면서 익혀보시기 바랍니다 ^^

URL 은 다음과 같겠죠?~! ^-^

http://아이피:포트/extjs3/ch03_01.html

extjs3.war