ExtJS 기초강좌 13 - 폼필드(FormField)의 다양한 컴포넌트 알아보기

ExtJS 2015. 6. 13. 10:27

ExtJS에서 제공하는 다양한 폼종류에 대해서 간단하게 알아보도록 하겠습니다.

보통 html 태그를 예를 들면 다음과 같은 태그들이 존재할 수 있겠습니다.


text : <input type="text" /><br/>
password : <input type="password" /><br/>
file : <input type="file" /><br/>
textarea : <textarea rows="10" cols="50"></textarea><br/>
checkbox : <input type="checkbox" value="1" /><br/>
radio : <input type="radio" name="rdo" value="1" />
	 <input type="radio" name="rdo" value="2" /><br/>
<h1>ADD HTML5 TAG ▼</h1>
color : <input type="color" /><br/>
date(day) : <input type="date" /><br/>
date(month) : <input type="month" /><br/>
tiem : <input type="time" /><br/>
week : <input type="week" /><br/>

신규 추가된 HTML5의 태그들을 제외한다면

text/file/textarea/checkbox/radio

이 정도 태그 밖에 존재하지 않는 것입니다.

그럼 ExtJS에서 제공하는 폼필드들을 한번 코드 작성 후,

결과를 확인 해보겠습니다.

▶ 샘플코드


Ext.onReady(function(){
	Ext.create('Ext.Panel',{
		title : 'Default Form Field',
		items : [{
			xtype : 'textfield',
			width : 700,
			fieldLabel : 'text'
		},{
			xtype : 'textfield',
			inputType : 'password',
			width : 700,
			fieldLabel : 'password'
		},{
			xtype : 'filefield',
			width : 700,
			fieldLabel : 'file'
		},{
			xtype : 'filebutton',
			text : 'upload button'
		},{
			xtype : 'numberfield',
			width : 700,
			fieldLabel : 'number'
		},{
			xtype : 'datefield',
			width : 700,
			fieldLabel : 'date',
			maxValue: new Date()
		},{
			xtype : 'timefield',
			width : 700,
			fieldLabel : 'time'
		},{
			xtype : 'textarea',
			width : 700,
			fieldLabel : 'textarea'
		},{
			xtype : 'checkbox',
			fieldLabel : 'checkbox',
			value : 'yes'
		},
		{
			xtype : 'panel',
			layout : 'hbox',
			items : [{
		        xtype: 'radiofield',
		        name: 'radio1',
		        value: 'M',
		        boxLabel: 'Man',
		        fieldLabel : 'Sex'
			  }, {
		        xtype: 'radiofield',
		        name: 'radio1',
		        value: 'W',
		        boxLabel: 'Woman'
		  	}]
		},
		{
			xtype : 'panel',
			layout : 'fit',
			title : 'editor',
			items : [
				{
					xtype : 'htmleditor'
				}
	        ]
		},
		{
			xtype : 'panel',
			layout : 'fit',
			title : 'datepicker',
			layout : 'hbox',
			items : [
				{
					xtype : 'datepicker'
				},{
					xtype : 'monthpicker'
				}
         	]
		}],
		renderTo : Ext.getBody()
	})
})

▶ 실행결과