ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자

HTML에서 다양한 태그들이 존재하는 것처럼 ExtJS 역시 다양한 종류의 XTYPE이 존재합니다.

xtype은 기본 input 태그들에 살을 좀더 붙여서 만들어놓은 컴포넌트라고 생각하시면 되겠습니다.

그럼 자주 사용되는 input 태그들을 extjs의 xtype을 이용하여 출력시켜 보도록 하겠습니다.

비교를위한 HTML 입력폼을  간단하게 만들어보도록 하겠습니다.

일반 HTML태그를 이용하여 만든 회원가입예제화면

	이름 : <input type="text" /><br/>
	패스워드 : <input type="password" /><br/>
	생년월일 : <input type="text" /><br/>
	나이 : <input type="text"/><br/> 
	성별 : <input type="radio" />남 <input type="radio" />여<br/>
	메일주소 : <input type="text" /> @ <input type="text" /><br/>
	자기소개 <br/><textarea rows="10" cols="50"></textarea><br/>
	<input type="checkbox" />메일수신에 동의합니다.<br/>
	<input type="button" value="가입하기" />

위 작성한 디자인 전~~혀 되있지 않는 코드를 한변 실행해보도록 하겠습니다.

HTML 폼코드 실행결과

실행결과 위와 같은 화면이 실행되었습니다.

디자인을 적용하면 물론 깔끔해지긴 하겠지만 

저의 목적은 각 타입의 비교 및 이해를 시키고자 작성한 것이므로 

css 적용은 하지 않았습니다.

위와같이 일반 태그들을 적용하였습니다. 

그렇다면 별도로 CSS코딩을 하지 않고 

이미 모든 준비가 되어있는 ExtJS의 XTYPE을 이용하여 

동일하게 혹은 좀더 업그레이드 하여 구현하도록 해보겠습니다.

※ 추가로 ExtJS에서 제공해주는 기본 HTML 에디터까지 적용해보았습니다.

ExtJS에서 제공하는 폼필드를 이용한 예제코드

Ext.onReady(function(){
	//form submit을 위한 form 패널을 생성
	Ext.create("Ext.form.Panel",{
		renderTo : Ext.getBody(),
		title : '폼필드 예제',
		width: 600,
		items : [{
			fieldLabel: '이름',
			//<input type="text"/> 와 동일폼
			xtype : 'textfield',
        },{
			fieldLabel: '비밀번호',
			xtype : 'textfield',
			//<input type="password"/> 와 동일폼
			inputType: 'password'
        },{
			fieldLabel: '생년월일',
			//datepicker 달력 폼
			xtype : 'datefield',
			format : 'Y.m.d'
        },{
			fieldLabel: '나이',
			//숫자만 입력가능한 폼
			xtype : 'numberfield',
			maxValue : 100,
			minValue : 0
        },{
        	fieldLabel: '성별',
        	//<input type="radio"/>와 동일폼
        	xtype: 'radiogroup',
            items: [
                {boxLabel: '남', name : 'radio', inputValue: 1, checked: true},
                {boxLabel: '여', name : 'radio', inputValue: 2},
            ]
        },{
			fieldLabel: '메일주소',
			//<input type="text"/> 와동일폼이면서 vtype을이용한 자동 메일주소검증
			xtype : 'textfield',
			vtype : 'email'
        },{
        	//<textarea></textarea>와 동일폼
        	xtype: 'textareafield',
            fieldLabel: '자기소개'
        },{
        	
        	//checkbox 선언 전 checkboxgroup으로 감싸주어야함
            xtype: 'checkboxgroup',
            items: [
					//<input type="checkbox"/>와 동일폼
                    {xtype: 'checkboxfield', boxLabel: '메일수신에 동의합니다', name: 'chkarr'}
            ]
        },{
           //HTML 에디터 컴포넌트
            xtype: 'htmleditor',
            fieldLabel : '비고'
        }],
        fbar : [{
        	xtype : 'button',
        	text : '가입하기'
        }]
	})
})

ExtJS를 이용한 코드 실행결과

위처럼 폼화면이 만들어 졌습니다.

코드에 주석들을 달긴하였지만 알아두셔야 할 부분이

기존에 일반 panel 도화지를 사용했었는데 

이번 코드에서는 도화지만 form.panel 도화지를 사용하였습니다.

폼패널을 사용한 이유는 이번 포스팅에서는 구현이 되지 않았지만 

HTML태그 기준으로 FORM SUBMIT을 하기 위함이랑 

동일한 동작을 실행시키기 위해서 폼패널 도화지를 이용하였습니다.

"submit테스트를 하거나 각 입력값들을 받아오는법까지 설명해야지" 

라고 말씀하시는분들이 계실건대 리스너 핸들링은 추후에 설명 드리겠습니다.

언제 설명하냐고요? 

언젠가는 설명하겠죠... 

컴포넌트 생성하는 습관(?)을 기른 후에 천천히 진행하려 합니다..

초심자였을때의 생각을 해보시면 HTML태그를 처음 접하려고 하셨을때!!

상당히 머리가 아프셨을겁니다.

대충 html을 이해하시려 했을때

 자바스크립트와 CSS 이건또 뭐지? 

멘붕이 오셨을 텐데 

이런 순서와 유사하다고 보시면 되겠습니다.

기본적으로 껍데기 생성법을 익히신 다음 

자바스크립트와 CSS 단계인 리스너 핸들러 단계 및 기능구현을 하고자 순차적으로 진행하는것이니..

급하신분들은 ExtJS EXAMPLE + DOCUMENT를 제공해주는

영문사이트로 고고!!

http://extjs.com

그리고 이번 포스팅에서는 빼먹은 태그(?)들이 존재합니다. 

파일필드 및 콤보박스에 대해서는 폼필드안에 정의하긴 해야하겠지만 

간단한 예를들어서 만들어보고자 이번 작성에서는 제외하였습니다.

다음 포스팅은 파일필드를 이용하여 

간단하게 싱글파일 전송과

 HTML5를 이용한 MULTIPLE 파일 전송에 

대한 예를 다루어 보도록 하겠습니다.

by 개발로짜