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()
    	})
    })
    
    

    ▶ 실행결과


    다양한 폼필드를 출력해보았습니다.

    코드가 조금 길어져서 복잡해보일수도 있겟지만,

    코드에 작성한 폼필드의 xtype만 보시면 되겠습니다.(panel 제외)


    ▶적용 폼필드

    ① textfield

    ② filefield

    ③ filebutton

    ④ numberfield

    ⑤ datefield

    ⑥ timefield

    ⑦ textarea or textareafield

    ⑧ checkbox

    ⑨ radiofield

    ⑩ htmleditor

    ⑪ datepicker

    ⑫ monthpicker


    패스워드의 경우 별도의 xtype이 존재하는 것이 아니고, textfield 타입에서 inputType config 속성을 password로 지정해줘서 출력이 되는것입니다.

    그리고 비록 상용에디터정도의 기능은 아니여도 기본으로 글꾸미기 정도 가능한 HTML에디터도 지원을 해주고 있군요.


    그 외에 슬라이더/컬러피커 등.. 기타 유용한 폼필드도 존자하나, 기본으로 제공해주는 것이 아니고 ExtJS에서 제공하는 플러그인 형태의 클래스를 적용해서 사용이 가능합니다.

    제공되는 기타 클래스들은 화려한 컴포넌트 및 기능들이 다양합니다.

    관련 내용은 이후에 다뤄보도록 하겠습니다.


    현재 장에서는 일반 패널내에 폼필드를 출력했습니다.

    추후 데이터 전송을 할 경우에는 일반 패널이 아닌 폼패널을 이용하여 입력값들을 서버에 전송하는 내용을 다뤄보도록 할 예정입니다.


    그리고 이번장에서는 다뤄보지 않은 폼이 하나 있습니다.

    바로 'SELECTBOX'와 동일한 콤보박스가 존재하는데 이 컴포넌트는 Store라는 데이터저장소에 대한 개념을 이해하셔야 하기 때문에 데이터스토어 관련 강좌를 진행할 때 다루도록 하겠습니다.


    폼필드로 로그인/회원가입/글쓰기 등의 컴포넌트 제작을 하시면 되겠습니다.




    Posted by 몽고
    • 김기현
      2018.11.01 18:51 신고

      염치불구 도움을 요청합니다.
      xtype:'filefield',
      listeners : {
      change: function (filefield) {
      filefield.up('form').submit({ url:'...'
      이걸 돌리면 listener가 change를 두번 인식해서 url에 두번 찾아들어갑니다.
      fieldtext로 empty로 리셋이 됩니다.
      내부 버그인지.. 해결이 되질 않네요
      stackoverflow의 같은 문제 : https://stackoverflow.com/questions/26211812/file-upload-field-is-reset-when-submit-form/27903159 => 해결되지 않음


      • BlogIcon 몽고
        2018.11.01 19:03 신고

        테스트 브라우저랑 extjs 버전을 알려주시면 테스트해보고 해결되면 메일로 전달드리겠습니다^^

    • 김기현
      2018.11.01 19:29 신고

      익스플로러 11 / ext 4.1.1입니다. 감사합니다^^

      • BlogIcon 몽고
        2018.11.02 15:18 신고

        확인결과 form submit 처리 말고 change 일 경우, ajax 로 파일 전송을 해주셔야 할거 같습니다.
        파일 처리는 formdata 를 이용하시면 될거 같습니다.


        {
        xtype : 'filefield',
        listeners : {
        change : function(obj){
        var formData = new FormData();
        formData.append("file",obj.fileInputEl.dom.files[0]);
        Ext.Ajax.request({
        url: "/sample",
        rawData:formData,
        method : 'POST',
        headers: {'Content-Type':null},
        success: function(fp, o) {
        console.log("!!");
        }
        });
        }
        }
        }

    • 김기현
      2018.11.03 15:26 신고

      몽고님 정말 감사합니다. ㅠ.ㅠ