[ExtJS강좌9] 폼을 화면에 출력하기 (1)

이번에는 ExtJS에서 제공하는 입력 폼들을 화면에 띄워보도록 하겠음돠~

입력폼들만 하더라도 엄~~~청나게 다양하며 독특한 폼들도 존재한다.

이번장에서는  입력태그들중

text

password

checkboxfield

radiofield

textarea

datefield

timefield

button

들을 출력해보도록 하겠다.

아직 기존 extJS 연동준비가 안되어 있으시다면 해당 링크로 세팅을 하신후 

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

위에 필드 말고도 

html태그에서 select 태그와 유사한 combobox,

파일처리를 위한 filefield,

스마트에디터, 다음에디터 수준의 에디터까지는 아니여도 어느정도 에디터역할을 해주는 htmleditor를

다음에 진행하도록 하겠음!! 

폼필드들은 심플하다. html에 input 태그들을 알고 있다면 적응하기 쉬움...

위의 폼들을 적용할만한 예제로 회원가입폼을 한번 예를들어봅시다.

우선 html의 <form></form>와 같이 폼패널을 선언하고 내부 태그들을 넣어봅시다.

Ext.onReady(function(){
	   Ext.create('Ext.form.Panel',{
		   title : '아르바이트 회원가입',
	       renderTo : Ext.getBody(),
	       items : [
				{
					//label
				    fieldLabel: '아이디',
				    //input type="text"
				    xtype : 'textfield'
				},
				{
					//label
				    fieldLabel: '비밀번호',
				    
				   //inputType값은 password라도 주어지면 text -> password input으로 변경
				    xtype : 'textfield',
				    inputType: 'password'
				},
				{
					//<input type="radio"/>
		            xtype: 'radiogroup',
		            //label
		            fieldLabel: '성별',
		            //items내의 name명을 맞춰주면 radiogroup이 된다.
		            items: [
		                {boxLabel: '남', name: 'sex_gubun', inputValue: 1, checked: true},
		                {boxLabel: '여', name: 'sex_gubun', inputValue: 2},
		            ]
		        },
		        {
		        	//<input type="checkbox"/>
		            xtype: 'checkboxgroup',
		            //label
		            fieldLabel: '취미',
		            //체크박스 목록
		            items: [
		                    {xtype: 'checkboxfield', boxLabel: '골프', name: 'chkarr'},
		                    {xtype: 'checkboxfield', boxLabel: '수영', name: 'chkarr'}
		            ]
		        },
		        {
		        	//jqueryUI의 datepicker과 유사한 달력태그
                    xtype     : 'datefield',
                    //label
                    fieldLabel: '생년월일'
                },
                {
                	//숫자만 가능함
                    xtype     : 'numberfield',
                    //label
                    fieldLabel: '나이',
                    //최소나이
                    minValue: '0',
                    //최대나이
		            maxValue: '150'
                },
		        {
                	//label
		            fieldLabel: '희망시작시간',
		          	//시간에대한 select box
		            xtype: 'timefield',
		            //최소시간 ~
		            minValue: '8:00am',
		            //~ 최대시간
		            maxValue: '6:00pm'
		        },
		        {
		        	//<textarea></textarea>
		            xtype: 'textareafield',
		            //label
		            fieldLabel: '자기소개',
					//textarea 넓이		            
		            width : '50%'
		        }
	       ],
              //버튼부분
	       buttons: [{
	            text: '가입',
	            handler: function() {
	            	Ext.Msg.show({
	                    title : '가입버튼클릭',
	                    msg : '가입버튼클릭',
	                    icon : Ext.Msg.INFO,
	                    buttons : Ext.Msg.OK
	                });
	            }
	        },{
	            text: '가입취소',
	            handler: function() {
	            	Ext.Msg.show({
	                    title : '가입버튼클릭',
	                    msg : '가입취소클릭',
	                    icon : Ext.Msg.ERROR,
	                    buttons : Ext.Msg.OK
	                });
	            }
	        }]
	   })
	})

여러개의 태그를 한소스내에 불러오려고 하는지 소스가 길다.

주석때문에 조금더 길게 보일수도...

실행화면이다

폼이 완성되었다!!

html태그들을 조금이나마 알고있다면 대충 눈으로 보았을때 뭐하는 놈들인지 알것이다.

위에는 단순히 태그들만 화면에 뿌려보았는데

서버에 submit 하거나 기타 속성값들에 따른 부분은 심플강좌에서 다루도록 하겠다!!

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!