'웹개발강좌' 카테고리의 글 목록 (11 Page) IT Code Storage

/61

2014. 10. 28. 14:00

ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법

기존에 컴포넌트들을 단순히 속성값만을 지정하여 화면을 출력하는 작업을 해보았습니다.

물론, 야금야금 이벤트핸들링에 대해서 맛보기 형식으로 한두번 다루어 봤었습니다.

그러나 앞으로 다루어 볼 그리드패널이나 트리패널 컴포넌트 그리고 STORE라는 저장공간 등... 에 대해서

이해를 조금 더 쉽고 빠르게 진행하시려면

ExtJS 사이트에서 제공하는 API 도큐먼트 문서에서 원하고자 하는 내용을 찾는 방법을 익혀두셔야 합니다.

이 포스팅에서 다루는 내용을 이해가 안되시거나 막히신다면 앞으로의 포스팅 진행에 어려움이 있으실겁니다.

그럼 ExtJS API문서보는방법을 시작해보도록 하겠습니다.

하단사이트에 접근을 해보도록 하겠습니다.

http://docs.sencha.com/extjs/5.0/apidocs/

기본적으로 좌측에 API들이 트리형태의 패키지형식으로 정리되어있습니다.

광대한 양의 API를 지원하지만 솔직히 개발을 진행하면서

ExtJS에서 제공하는 API들을 얼마나 사용할 수 있을까요?

많이 써봐야 10~20%정도뿐이 되지 않는다고 생각합니다.

물론, API를 모두 번역하고 모든 컴포넌트들을 프로젝트에 적용을 한다면 100% 사용하는 셈이 되겠죠.

100% 사용하는 경우는 없다고 생각됩니다.

슬퍼3

필요한것만 찾기 위해서는 우측상단에 검색창을 주로 이용할게 될것입니다.

예를들어, panel의 속성을 알고 싶다?

검색창에 "panel" 이란 검색어를 친다음 자동완성으로 나온 검색값들중 원하는 결과값을 클릭하십니다.

panel이라고 검색하실경우 제일 상단 xtype:panel이 나오고 다음으로 Ext.panel.Panel이 나오는데

이 2가지 결과는 동일한 클래스를 의미하는 것입니다.

아무거나 선택 하시면 되겠습니다.

JAVA 클래스개념과 상단히 비슷합니다.

Panel이라는 클래스는 Ext.panel 패키지내에 존재하는 클래스인것과 유사한 개념인거죠.

전에 포스팅했던 내용들을 위와 같은 방법으로 검색하시면 모두 쉽게 찾으실 수 있습니다.

같은 클래스명이지만 다른 패키지에 속한 경우도 많이 존재하는데

이부분에 대해서는 될수있으면 검색결과값 상단에 위치하니 모르셔도(?) 된다고 말씀드리고 싶습니다.

상단 클릭했는데 아니다?

그럼 다음 검색결과 값을 클릭하셔서 동작시켜보면 되는 문제이기 때문입니다.

어짜피 이것저것 적용해보면서 원하는 결과가 나오게되면 자연스레 자신의 머리에 들어가게 됩니다.

그럼 기존에 포스팅 한 코드의 일부를 보시겠습니다.

초기에 작성했던 포스팅에 대한 샘플코드를 이용하여 예를들어보겠습니다.

2014/10/21 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기

위 포스팅에 작성했던 코드를 보시면

최초에 컴포넌트는 Ext.create로 클래스 생성을 했고 하단 자식 컴포넌트는 xtype으로 컴포넌트 생성을 하였습니다.

Ext.create("Ext.panel.Panel",{}) = xtype : "panel"

둘다 같은개념입니다.

xtype : Ext.create("Ext.panel.Panel",{}) 와 같이 생성하여 적용하는 것도 가능 하지만

기본적으로 제공해주는 컴포넌트들은 이미 상수(?)로 지원을 해주므로

필요하지 않는이상 상수(?)를 사용해주시는게 편하시고 코드도 간결해지겠죠?

컴포넌트 속성들의 극히 일부를 적용해보았는데

실제로 어떻게 골라서 적용하는지에 대한 방법을 알려드리겠습니다.

Configs라는 메뉴에 마우스를 가져가보시면 레이어로 여러가지 속성들이 출력이 됩니다.

이부분이 바로 컴포넌트들의 속성 key가 되겠습니다.

샘플코드의 패널컴포넌트의 속성 key들이 바로 노란색으로 체크를 해놓은 부분들입니다.

바로 이 configs라는 페이지(?)를 통해서 찾아서 적용을 하는 것이죠.

그럼 key가 있는데 value 값은 어떻게 아느냐~

이것?일거 같은 config key 값을 클릭해주면

return type이랑 설명들이 영문으로 자세히 나와있습니다.

영단어 혹은 줄임말로 만들어놓은거라 추측하시기는 쉬우실 겁니다

width key 를 클릭하여 포커스 잡은 내용입니다.

입력가능한 값은 숫자 혹은 문자열이며 설명을 대충 보자면

"현재 이 컴포넌트의 넓이다"

"숫자값을 입력하면 픽셀값의 숫자로 해석을 한다"

"문자열은 CSS의 단위값으로 처리가 된다"

대충 이런식으로...

구글번역을 이용하여 간단하게 CONFIG의 설명에 대해서 유추해볼수 있겠습니다.

다른 속성값들도 이런 방식을 이용하여 이해하면서 적용이 가능한 방법입니다.

다음으로 이벤트 핸들러를 적용해보는 방법입니다.

이벤트 핸들러의 예를들기위한 샘플코드는

2014/10/28 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함)

이 포스팅에 2개정도 사용한 내용이 있으니 해당 코드를 이용하여 설명을 드리겠습니다.

기본적으로 이벤트 핸들러를 적용하기 위해서는 listeners 라는 속성내에 정의를 해주셔야 합니다.

MVC에는 약간 방식이 다르긴 하지만 MVC 포스팅 전까지는 리스너 속성내에 이벤트 핸들러를 정의하도록 하겠습니다.

이번에는 검색에 xtype인 filefield를 검색해보겠습니다.

작성한 xtype : filefield이므로 첫번째 결과값 클릭합니다.

속성 key를 알기위해서는 configs 메뉴에 마우스 OVER를 하였다면

이벤트 핸들러는 Events 메뉴에 마우스 OVER 하시면 확인이 가능합니다.

코드에 리스너 이벤트 2개가 등록되어있습니다.

afterrender, change 를 작성하였는데 change를 예를 들어보도록 하겠습니다.

지원하는 이벤트 동작내용을 알기위해 마찬가지로 클릭을 합니다.

change : function(this,value,eOpts){// code here}

위와같은 문법으로 이벤트 핸들링함수를 정의합니다.

change 이벤트에 대한 영문해석은 대략

"파일입력 컴포넌트의 값이 파일탐색기의 파일선택에 의하여 변경될경우에 동작되는 이벤트"

라고 유추해볼수 있겠습니다.

function 정의시 callback 되는 parameter들은 this,value,eOpts 3가지가 존재하는데

보통 this를 parameter시 정의되어있는 명칭이어서 별도의 변수명으로 변경해주셔야 할겁니다.

예를들어 object라던가 혹은 obj 등등...

첫번째 parameter는 파일컴포넌트에 대한 this object가 되겠습니다.

두번째 parameter는 return value 값이라는데 alert이나 결과값을 찍어보시면 좀더 확실히 아실거 같네요.

마지막 세번째 parameter 는 추가된 리스너 어쩌구라고 하는데 사용을 해본적이 없어서...;;

아무튼 저런식으로 이벤트를 catch할수 있으며 그 내부에 원하시는 함수구현을 하시면 되겠습니다.

현재 제블로그에 적용중인 GKSkin에 경우에 예를들어보면

현재 화면 좌측 사이드 바가 존재하는데

브라우저의 넓이가 일정사이즈까지 줄어들면 자동으로 collapsed 이벤트를 적용하여

자동접히는 기능을 events + methods의 문서를 보고 기능구현하였습니다.

화면이 사이즈가 넓을 경우 사이드바 expand 유지

화면이 일정사이즈까지 줄어들었을 경우 사이드바 collapsed 기능실행

마지막으로 컴포넌트에 대한 이벤트가 아닌 동작 핸들링을 설명드리도록 하겠습니다.

동작핸들링은 컴포넌트들이 어떠한 기능 및 동작을 진행할때 함수내에 정의하는 것입니다.

즉, 리스너의 이벤트 함수내에 컴포넌트들의 정보획득 및 기능구현을 위한 방법이기도 합니다.

위와같이 보시면 컴포넌트에 대한 정보 get/set에 대한 기본 핸들링부터

isxxx에 관련된 비교문까지 엄청 많은 함수들을 제공합니다.

파일필드클래스의 경우, 237개의 기능을 제공해주고 있네요. -0-;;;

예를들고자 파일컴포넌트의 getWidth 함수가 어떤 역할을 하는지 클릭해보도록 하겠습니다.

현재 컴포넌트(파일태그)의 태그 넓이를 구해오기 return 값은 숫자 라는 식으로 정보가 나와있습니다.

이런식으로 컴포넌트 핸들링을 위해서는 events 내에 methods들을 이용하여 구현하면 되는 방식입니다.

앞으로 리스너의 이벤트 핸들링 + 메소드 핸들링을 이용하여 조금 더 ExtJS에 다가가보도록 하겠습니다.

by 개발로짜

저작자표시 비영리 변경금지 (새창열림)

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - 데이터스토어(store)의 proxy ajax를 통하여 콤보박스 목록 출력시켜보기 (0)	2014.10.30
ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0)	2014.10.30
ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함) (17)	2014.10.28
ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자 (0)	2014.10.27
ExtJS 강좌 - 버튼클릭으로 윈도우 모달창 띄워보기 (2)	2014.10.24

/60

2014. 10. 28. 10:00

ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함)

지난 포스팅은 간단하게 폼필드에 대해서 작성을 해보았습니다.

2014/10/27 - [웹개발강좌/ExtJS] - ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자

이번에는 파일필드에 대해서 알아보도록 하겠습니다.

단일 파일업로드 ~ HTML5를 이용하여 버튼하나로 다중파일업로드까지 처리해보도록 하겠습니다.

서버페이지 관련 로직은 본인이 파일업로드시 처리하시는 PHP/JSP/ASP 등등.. 로직을 사용하시면 되겠습니다.

ExtJS 파일필드를 사용한 싱글파일업로드 샘플코드

Ext.onReady(function(){
        Ext.create("Ext.form.Panel",{
            width : 600,
            renderTo : Ext.getBody(),
            items : [{
                xtype : 'filefield',
                //라벨 정의 
                fieldLabel : '파일첨부',
                //파일첨부 버튼에 텍스트 정의
                //정의 안할시 Browse... 디폴트 정의됨
                buttonText  : '찾아보기',
                //<input type="file" name="fileupload"> 와 동일하게 서버에서 받기위한 name명이 fileupload
                name : 'fileupload'
            },{
                xtype : 'button',
                text : '전송',
                handler : function(btn){
                    //form 객체 찾기                    
                    var frm = btn.up("form").getForm();
                    //폼패널 검증
                    if(frm.isValid()) {
                        //폼 submit 
                        frm.submit({
                            url: '/fileTest',
                            waitMsg : '업로드 중...',
                            success : function(fp, res) {
                                var jsonResult = Ext.JSON.decode(res.response.responseText);
                                var msg = "UPLAODED FILE NAME : " + jsonResult.filename+"<br />";
                                    msg += "UPLAODED FILE SIZE : " + jsonResult.filesize;
                                Ext.MessageBox.show({
                                            title : '업로드완료',
                                            msg : msg,
                                            buttons : Ext.MessageBox.YES,
                                            icon : Ext.MessageBox.INFO
                                });
                            }
                        });
                    }
                }
            }]
        })
    })

처음으로 이벤트 핸들러의 코드라인이 많이 길어졌습니다.

로직을 설명드리자면

1. name값이 'fileupload' 라는 filefield를 폼필드 내에 선언 한 다음 handler를 이용하여 버튼클릭 이벤트 실행

2. 폼양식을 체크 한 후 true일 경우 form필드내에 있는 입력폼들을 submit

3. submit은 ajax call이 일어난 후 success callback 함수를 호출합니다.

※ 이경우 서버페이지에서 json object 로 전송받은 데이터들을 받아낼 수 있으며 별도로 화면 제어가 가능

4. formsubmit의 속성중 url은 submit url 페이지를 의미 form 태그의 action과 동일

5. waitMsg의 경우 submit 하는 도중 로딩바기능처럼 화면에 진행상태를 표시해주는 역할

callback으로 받은 스크립트 코드중, res.response.responseText라는 부분이 있습니다.

이 코드는 서버에서 전달한 json object를 담아온 데이터입니다.

하지만 object 타입이 아닌 text 타입이므로 Ext.JSON.decode를 이용하여 json object로 변경을 해준 것입니다.

Ext.Message.show는 전에 다이얼로그창 강좌에서 작성한 내용중 일부 컴포넌트를 작성한 내용입니다.

2014/10/23 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기

서버페이지는 샘플용으로 저는 다음과 같이 작성 해보았습니다.

저같은 경우는 Spring3 MVC + jackson(json api) 를 이용한 샘플 서버코드입니다.

Vo.java 클래스 샘플코드

// filefield에서 정의해준 name값
private MultipartFile fileupload;
public MultipartFile getFileupload() {
    return fileupload;
}
public void setFileupload(MultipartFile fileupload) {
    this.fileupload = fileupload;
}

Controller 샘플코드

@RequestMapping(value="/fileTest")
public @ResponseBody Map<String, Object> fileTest(Vo vo, HttpServletRequest request, HttpServletResponse response) {
    Map<String, Object> map = new HashMap<String, Object>();
        //필수 값
    map.put("success", true);
    map.put("filename", vo.getFileupload().getOriginalFilename());
    map.put("filesize", vo.getFileupload().getSize());
    return map; 
}

서버코드에서 필수로 json object에 넘겨줘야 할 key/value 값은

success key 값에 value가 true로 넘겨주어야 클라이언트부분에 success callback 호출이 가능합니다.

실행결과는 다음과 같습니다.

싱글파일업로드 실행결과

실행결과 다음처럼 싱글 파일 업로드가 완료되었습니다.

이어서 HTML5를 이용하여 다중파일업로드를 진행해보도록 하겠습니다.

HTML5를 이용한 다중파일 업로드

Ext.onReady(function(){
        Ext.create("Ext.form.Panel",{
            width : 600,
            renderTo : Ext.getBody(),
            items : [{
                xtype : 'filefield',
                buttonOnly: true,
                buttonText  : '파일첨부',
                //<input type="file" name="fileupload"> 와 동일하게 서버에서 받기위한 name명이 fileupload
                name : 'fileupload',
                listeners:{
                    afterrender:function(object){
                        //input type="file" 태그 속성중  multiple이라는 속성 추가
                        object.fileInputEl.set({multiple:'multiple'});
                    },
                    change : function(object, value, eOpts ){
                        //파일첨부를 다중으로 선택시 열시버튼 누르면
                        //change 이벤트를 발생시켜 폼 submit!
                       
                        var frm = object.up("form").getForm();
                        if(frm.isValid()) {
                            frm.submit({
                                url: '/fileTest',
                                success : function(fp, res) {
                                    //json text to json object
                                    var jsonResult = Ext.JSON.decode(res.response.responseText);
                                    var msg = "업로드된 파일명<br/>";
                                    //jQuery $.each 와 동일 문법
                                    Ext.each(jsonResult.filelist,function(object){
                                        msg += object.filename+"("+object.filesize+" byte)"+",";
                                    });
                                    msg = msg.substring(0,msg.length-1);
                                    Ext.MessageBox.show({
                                                title : '업로드완료',
                                                msg : msg,
                                                buttons : Ext.MessageBox.YES,
                                                icon : Ext.MessageBox.INFO
                                    });
                                    //한번 submit 처리가 되면 filefield는 초기화 되므로
                                    //다시 filefield에 multiple 속성 설정
                                    object.fileInputEl.set({multiple:'multiple'});
                                }
                            });
                        }
                    }
                }
            }]
        })
})

싱글 파일업로드 경우 버튼 클릭 핸들러를 적용하여 서버로 submit 처리를 하였지만

다중파일은 change 이벤트 적용시 form submit 처리를 하도록 하였습니다.

현재 extjs5에서 filefield에 별도로 multiple 속성값을 제공하지 않는 관계로

임의로 파일태그내에 multiple 속성을 별도로 지정해주었습니다.

change 이벤트로 싱글파일업로드도 가능합니다.

1. afterrender : 랜더링이 완료 된후에 발생되는 기능정의를 의미하는 것인대 함수내 정의한 코드를 보시면

xtype이 filefield내에 fileInputEl속성의 set함수를 이용하여 input type="file" 태그에 multiple="multiple" 이란

HTML5 다중파일 속성을 지정하였습니다.

2. change : 파일첨부가 일어나는 시점에 발생되는 이벤트입니다. 이 코드를 이용하여 단일 파일업로드도 가능합니다.

이어서 설명드리자면 파일첨부 버튼 클릭 후 파일탐색기에서 여러개 파일 선택 후 열기 버튼 클릭시

자동으로 form submit이 되게 처리 하였습니다.

submit 후 callback 부분은 기존 싱글파일업로드와 동일하지만 마지막 코드에 추가로 또한번 multiple 속성을

지정해주었습니다.

재지정해준 이유는 form submit이 이루어 진후 multiple 속성이 초기화 되는 문제로 다시한번 multiple 속성을 지정해

준것입니다.

변경된 서버코드는 다음과 같이 작성되었습니다.

Vo.java 클래스 샘플코드

//다중파일에 정의한 filefield name명
private ArrayList<MultipartFile> fileupload;
public ArrayList<MultipartFile> getFileupload() {
    return fileupload;
}
public void setFileupload(ArrayList<MultipartFile> fileupload) {
    this.fileupload = fileupload;
}

Controller 샘플코드

@RequestMapping(value="/fileTest")
public @ResponseBody Map<String, Object> fileTest(ConnectionInfo connectionInfo, HttpServletRequest request, HttpServletResponse response) {
        Map<String, Object> map = new HashMap<String, Object>();
        Map<String, Object> map2 = null;
        ArrayList<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
        if(connectionInfo.getFileupload() != null && connectionInfo.getFileupload().size() > 0) {
            for(MultipartFile file : connectionInfo.getFileupload()) {
                map2 = new HashMap<String, Object>();
                map2.put("filename", file.getOriginalFilename());
                map2.put("filesize", file.getSize());
                list.add(map2);
            }
        }
         
        map.put("success", true);
        map.put("filelist", list);
        return map; 
}

실행결과를 보도록 하겠습니다.

다중파일업로드 실행결과

실행결과 위화면처럼 다중파일업로드 결과가 출력되었습니다.

현재는 리스너 속성내에 정의된 이벤트들에 대한 이해가 안오시는 분들이 대부분이실 겁니다.

다음시간에는 간단하게 ExtJS의 Document 문서를 보면서

컴포넌트들의 주요속성 및 이벤트 핸들링에 대한 이해를 돕고자

설명을 진행을 하도록 하겠습니다.

문서 보는법을 간단하게나마 익히셔야 앞으로 포스팅 하는 내용들을 이해하실 수 있을 겁니다.

by 개발로짜

저작자표시 비영리 변경금지 (새창열림)

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - 콤보박스를 예를들어 스토어(STORE) 개념잡아보기 (0)	2014.10.30
ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0)	2014.10.28
ExtJS 강좌 - xtype을 이용하여 html의 입력태그들과 HTML에디터 컴포넌트를 출력시켜보자 (0)	2014.10.27
ExtJS 강좌 - 버튼클릭으로 윈도우 모달창 띄워보기 (2)	2014.10.24
ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4)	2014.10.23

/59

2014. 10. 27. 18:00

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 개발로짜

저작자표시 비영리 변경금지 (새창열림)

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법 (0)	2014.10.28
ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함) (17)	2014.10.28
ExtJS 강좌 - 버튼클릭으로 윈도우 모달창 띄워보기 (2)	2014.10.24
ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4)	2014.10.23
ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4)	2014.10.22

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법

ExtJS 강좌 - 파일필드를 이용하여 파일업로드하기(html5를 이용한 다중파일 포함)

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

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 파일필드를 사용한 싱글파일업로드 샘플코드

Vo.java 클래스 샘플코드

Controller 샘플코드

싱글파일업로드 실행결과

HTML5를 이용한 다중파일 업로드

Vo.java 클래스 샘플코드

Controller 샘플코드

다중파일업로드 실행결과

'웹개발강좌 > ExtJS' 카테고리의 다른 글

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

HTML 폼코드 실행결과

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

ExtJS를 이용한 코드 실행결과

'웹개발강좌 > ExtJS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역