전에는 이벤트들을 기술하는 controller와 컴포넌트들만 모아놓은 view 까지 나누는 작업을 

하였다.

오늘은 store/model 영역까지 나누는 작업을 진행하도록 하겠음 

store를 이용하는 모든 컴포넌트들(GridPanel, TreePanel, Combobox 등등..)에 대하여 

나눠볼 수 있겠다.

오늘로직은

버튼 클릭시, store에서 자동으로 data를 서버페이지에서 받아와 콤보박스에 뿌려준 다음,  

선택되어있는 콤보박스의 value와 text 값을 msg에 출력해보도록 하겠다 ~~

항상 마찬가지로 

ExtJS5 설정이 되있지 않으신 분들은  하단 링크를 참조하여 주시고

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

MVC (1),(2) 에대한 내용을 참고하신 다음 해당 예제를 진행하도록 하시길...

2014/07/04 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 22] MVC 기반으로 컴포넌트 동작시키기 (1)

2014/07/04 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 23] MVC 기반으로 컴포넌트 동작시키기 (2)

지난 mvc 구조에 이어서 추가로 구조를 나누도록 하겠다. 

mvc폴더내에 controller/view 폴더만 생성하였을 것이다.

추가로 store/model 폴더를 생성해주자

MVC 구조잡는법은 정답은 없다.

작업하는 자신의 환경에 맞춰서 잡아주면된다.

작성자의 최종 작업폴더는 다음과 같다.

DB작업부터 해서 총 샘플링을 할 수 없는 관계로 임의의 값을 서버에서 jsonObject로 넘겨주어서 출력하는 형식을 쓰도록 하겠다.

항상 store작업을 할때 언급은 하지만 json파싱을 위해 

php는 별도의 encode해주는 함수가 있는것으로 알고 있다.

java -> spring framework 는 jackson lib가 있는것으로 알고 있긴 하지만 본인이 첨부하는 

파일을 사용하여도 무관함

본인은 model 1 방식을 사용하고 있으므로 그냥 json-simple을 이용하기로 하겠음

json-simple-1.1.1.jar

store는 나중에 작업하기로 하고 본인은 위 구조에서 controller / view에 관련된 파일은 별도로 

추가하지 않도록 하겠다 

내부적으로 소스들을 조금씩 변경하여 사용하도록 하겠음

기존 view디렉토리의 mvcform.js 에서 xtype : 'textfield' 가 있는데 이부분을 다음과 같이 변경 하였다.

1. mvcform.js 일부 수정 textfield -> combo로

{
            //formpanel -> combo 선언
            xtype : 'combo',
            //combo리스트를 뿌려줄 store정의
            store : 'combostore',
            //store에서 받은 json key중,
            //선택시 value값이 될 json key
            valueField: 'id',
            //store에서 받은 json key중,
            //선택시 화면에 표출이 될 json key
            displayField: 'title',
            //초반에는 빈공백이 들어가므로 placeholder 정의
            emptyText: '선택하세요'
}

2. 새로 생성한 model 디렉토리에 combomodel.js파일을 하나 

생성해주고 다음과 같이 작성을 해주자

Ext.define('mvc.model.combomodel', {
    extend: 'Ext.data.Model',
   //store에서 받은 json의 key값
    fields: ['id', 'title']
});

3. 새로 생성한 store 디렉토리에 combostore.js파일을 하나 생성해주고 다음과 같이 작성해주자

Ext.define('mvc.store.combostore', {
    extend: 'Ext.data.Store',
    //mapping 시켜주기 위한 model
    model: 'mvc.model.combomodel',
    //autoLoad true를 해주어도 무관
    autoLoad: false,
    proxy: {
        type: 'ajax',
        api: {
        	// combolist.jsp 파일에서 jsonobject를 받는다.
        	read: '/combolist.jsp'
        },
        reader: {
            type: 'json', 
            //서버에서 넘겨받은 json object의 key값 = success를 주고 value값을 true로 주어야 함
            successProperty: 'success',
            //콤보박스에 list형식으로 받은 json array의 root key
            rootProperty: 'items'
        }
    }
});

다음으로 컨트롤러에 views: ['mvcform'], 위에 다음과 같은 코드를 삽입하여주자 

//store 추가
stores: ['combostore'],

기존에 그리드 페이징 했던 부분을 보면 위의 소스가 한 페이지에 몽땅 들어있었다.

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 12]그리드패널 - 세번째 편 ajax 그리드 페이징사용하기~

하지만 위와같이 나누어 줌으로써 역할을 나눠주고 각각의 기능별로 관리를 할 수 있다는것을 

느낄 수 있을것!!

... 나만느끼는건가..;;;   

아직 체감을 하지 못한다면 crud 샘플링을 할때 체감을 할 수 있을것이라 믿는다!!

combolist.jsp 페이지에서 받아야할 json의 형식은 다음과 같아야 한다.

{"items":[
              {"id":1,"title":"제목1"},
              {"id":2,"title":"제목2"}
            ],
  "success":true}

별도로 서버페이지의 로직은 더이상 설명 안하는걸로? ㅋㅋ 

그동안 순서대로 따라오신분들이시라면 쉽게 json object를 생성하실거라 믿음!! 

마지막으로 버튼클릭으로 msg창에다가 선택된 콤보박스의 text내용과 value값을 찍어보도록 

하자!! 

controller를 보면 clk함수내의 메시지 출력을 사용했었는데 메시지 함수내의 속성중에 msg 부분을 다음과 같이 수정 후 화면을 실행하도록 하자

msg : this.getMvcformcustom().down("combo").getRawValue()+"/"+this.getMvcformcustom().down("combo").getValue(),

실행화면 GOGO

실행을 해보면 combobox 클릭하면서 layout영영내에 로딩바가 잠시생기면서 리스트 출력이 되는것을 확인 할 수 있을것이다!  

ajax통신이 이루어지면서 서버에서 json object 를 받아와 출력을 한다는 의미이기도 하다

이로써 mvc의 기본구조를 모두 마쳤다. 

최종 폴더 구조는 다음과 같다.

mvc는 이해를 금방 하기에는 어렵습니다.

하지만 mvc프레임웍들을 (Spring framework / 코드이그나이터 등등...) 접해보셨던 분들이시라면 조금만 더 노력하신다면 수월하게 이해를 하실거라 생각됩니다.

mvc의 최종 구조는 오늘까지 한것이 기본구조라 설명 드릴 수 있겠습니다.

다음부터는 조금은 복잡해 지겠지만 구조는 항상 오늘까지 작업한 틀에서 변경이 되지 않을거라고 말씀 드리고 싶습니다 ^^

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

MVC 두번째 시간!!! 

두번째 샘플내용으로는

formpanel 내에다가 textfield 타입과 button 타입을 viewport내에 뿌린다음에 버튼 클릭시 textfield에 입력된 값을 메시지창에 출력시키도록 해보겠다.

ExtJS5 설정관련 내용은 

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

위 링크를 참고하고 

MVC 기본 설정은  하단 링크를 참고하도록 하자

2014/07/04 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 22] MVC 기반으로 컴포넌트 동작시키기 (1)

이전내용은 단순히  viewport에 xtype선언을 하고 controller에서 지정해준 함수를 동작시켰는데

이제는 별도로 xtype 마저도 별도의 스크립트 파일로 나누도록 하겠다.

커스텀태그라고 할수도 있겠다 ... -_-

view 폴더안에 mvcform.js 라는 파일을 하나 생성해주고 다음과 같이 코드를 작성하였다.

● mvcform.js

Ext.define('mvc.view.mvcform', {
    //xtype : formpanel의 클래스 상속
    extend: 'Ext.form.Panel',
    //xtpe에서 사용하기위한 커스텀명칭
    alias : 'widget.mvcformcustom',
    items : [
    	{
    		//formpanel -> textfield 선언
    		xtype : 'textfield'
    	},
    	{
    		//formpanel -> button 선언
    		xtype : 'button',
    		text : '버튼클릭'
    	}
    ],
    initComponent: function() {
        this.callParent();
    }
});

만약 view바로 밑이아니고 view -> form -> mvcform.js를 생성하였다면

define명칭 역시 다음처럼 변경 해주면 되겠다.

'mvc.view.form.mvcform' 

다음으로 작업해야 할 내용은 기존 mvccontroller에서 mvcform이란 놈을 읽을 수있게 custom view를 include해주어야 한다.

include 하는 방법은 views속성에 생성한 파일의 명칭을 넣어주면 된다.

본인은 view 폴더내에 바로 생성을 하여서 다음과 같이 선언을 해주었다.

Ext.define('mvc.controller.MVCController', {
	//기본상속
    extend: 'Ext.app.Controller',
    //view 추가
    views: ['mvcform'],
    init: function() {
		this.control();
    }
}); 

만약 위에서 view를 선언해준것처럼 view 폴더 바로 밑이 아닌경우에는

view 다음부터 오는 명칭을 선언해주면 되겠다.

view -> form -> mvcform.js라고 가정한다면

views : ['form.mvcform']

이렇게 주면 되겠다.

자 그럼 커스텀 뷰 등록하는것이 끝났다.

그럼 화면에 우리가 등록한 커스텀 뷰를 보여주어야 하니

화면에 기초인 viewport.js 로 넘어가자

items내에 있던 button은 필요가 없고 우리가 정의해놓은 커스텀 뷰를 xtype으로 지정하자

xtype은 mvcform에서 정의해준 alias를 지정해주면 된다. 

widget. << 이것은 빼고 .. ㅎㅎ 

viewport.js 의 items 부분

items : [
    	{
    		xtype : 'mvcformcustom'
    	}
    ]

저런식으로 선언하고 한번 화면을 띄워보도록 하자 

잘나왔도다~ 

다음으로는 클릭이벤트 발생시, mvcformcustom 폼패널의 object를 함수에서 받아와야 하는데 

받아오기위해서는 controller에서 추가 작업을 하나더 해주어야 한다

바로 refs : [] << 를 등록해주는 일인대

views와 같은 depth에 추가해주자

refs: [
     	   {
			    ref: 'mvcformcustom',
			    selector: 'mvcformcustom'
	   }
],

위와 같은 코드를 추가해주었다면 함수에서 custom태그를 읽을수 있다.

그렇다면 이제는 버튼 클릭 -> textfield의 값을 msg창으로 읽어와보는 함수를 제작해보자

지난시간처럼 this.controller() << 이안에다가 버튼 클릭시 함수동작시키게 셀렉터를 정의해주자

this.control({
			//css 및 jquery의 셀렉터와 비슷하다
			'mvcformcustom button': {
			            //이벤트 명칭 : 현재 페이지의 정의된 함수
             	                    click: this.clk
                        }  
});

셀렉터를 모르시는분들은 셀렉터를 한번쯤 검색하셔서 이해를 하신다음에 진행하셔야 할거 같음.

쉽게 설명하면 mvcformcustom 띄우고 공백에 button이라고 정의했다면

mvcformcustom -> xtype명이 button이라는에 대한 이벤트를 정의하는것입니다.

아무튼, 커스텀태그에 대한 click 이벤트를 정의해주었다.

이제 clk 라는 함수를 만들어보자

함수의 위치는 init 다음에 작성을 해보자

clk : function(btn){
    	Ext.MessageBox.show({
			title : 'MVC alert',
			msg : this.getMvcformcustom().down("textfield").getValue(),
			buttons : Ext.MessageBox.YES,
			icon : Ext.MessageBox.INFO
    	});
}

위 함수를 보면 msg 속성에 this 어쩌구 하는놈이 있는데 바로 저것이 textfield의 값을 불러오는 함수이다.

풀어서 설명을 하자면

this :  현재 contorller 페이지에서

getMvcformcustom() : refs에서 준 mvcformcustom 에대한 오브젝트를 획득한다.

                               (get다음에 첫번째는 항상 대문자여야함)

down("textfield") : 셀렉터 개념이다. formcustom 의 자식 xtype에 button이랑 textfield가 

                          있는데 down은 해당 object의 자식 xtype을 의미하는것이다.  

jQuery와 비교를 하면 자식을 찾는경우는

down() = find() 

이고 

부모를 찾는경우는 

up() = parent()

인 셈이다.

즉 풀어서 설명을 하면

현재 controller페이지에서 formcustom의 자식인 textfield를 찾아서 

getValue() : 값을 얻어오는것이라는 뜻이다.

또다른 방법은 버튼 object를 시작으로 textfield 값을 획득 하는것도 있다.

msg : btn.up("form").down("textfield").getValue(),

버튼클릭시 결국에는 같은 동작을 하는것을 확인해 볼수 있겠다

실행화면을 보도록 하자

ㅎㅎ 잘나온다~~ 감잡기가 어렵더라도 ㅜ.ㅜ 어쩔수가 없다.... 

mvc는 익히면 빨리익힐수도 늦게 익힐수도 있다... (복불복임...)

mvc를 이해하게되면 엄청 빠른 속도로 멋진 아웃풋을 낼 수 있을것이다..

모두들 화이팅 하시길....  

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

벌써 ExtJS 관련 강좌가 22번째네요 후아후아~

빠르다 빨라~

그동안에는 컴포넌트 관련해서만 화면에 출력하고 간단한 버튼 클릭이벤트나 listeners에 이벤트 

추가하여 동작이 되는 것을 확인해 보았었다.

본인이 생각하는 MVC의 장점은 기존 한페이지에 기능과 컴포넌트설정을 모두 적용하면 코드라인이 길어진다 

쉽게 말해 각 페이지별로 위에 내용처럼 기능들을 구분하여 분기를 하면 보기에도 편하고 출력속도도 분명히 빨라진다고 생각한다

첫번째로 MVC 구조를 잡도록 하자!! 

본인은 MVC 초반에 이해를 잘 못했는데 점점 써보니 이게 편하고 익숙해지는듯 싶다.

HTML 페이지 기반으로 오로지 html 페이지는 하나일뿐이고 그외의 나머지 리소스는 오로지 js 

파일뿐이다!!

뭐 스타일을 별도로 적용을 한다면 별도의 css도 필요하겠지만 본인은 항상 기본에만 충실하기 

때문!! 

css는 신경 안쓸랜다~~ 

설정이 안되신 분들은  하단페이지 링크를 참고하여 연동을 하도록 하자

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

그다음 폴더 구조를 잡도록 하자.

본인은 다음과 같이 구조를 잡았다.

진행하는 프로젝트 구조에 맞춰서 변경하도록 하자 해당 구조가 필수는 아니다!!

index.html에 기본적인 ExtJS 연동 파일 include 한거에 추가로 mvc.js 파일을 include 하도록 하자

<script type="text/javascript" src="/mvc.js"></script>

include 하였다면 mvc.js파일내에 코드를 다음과 같이 짜도록 하자

● mvc.js

Ext.application({
	//프로젝트에 사용할 어플리케이션 명칭
    name: 'mvc',
    //설정안해면 default "/app" 폴더를 인식한다.
    //알맞게 변경하도록 하자
    appFolder : '/mvc',
    //컨트롤러 등록
    controllers: [
       'MVCController'
    ],
    //view auto load
    //될수있으면 false는 주지 말자...
	autoCreateViewport: true
});

위와같이 지정해 주었다면 추가로 view 폴더에 Viewport.js 라는 파일을 만들어주고 

다음과같이 잡도록 하자

MVC에서 viewport.js가 핵심이다!

html의 body와 같다고 해야하나???? ㅋㅋ  

● Viewport.js

Ext.define('mvc.view.Viewport', {
	//viewport 상속
    extend: 'Ext.container.Viewport',    
    initComponent: function() {
        this.callParent();
    }
});

그리고 위에 mvc.js에 controllers에 추가해준 MVCConstorller를 만들어주자

생성위치는 controller 폴더 -> MVCConstorller.js라고 만들자

● MVCController.js

Ext.define('mvc.controller.MVCController', {
	//기본상속
    extend: 'Ext.app.Controller',
    init: function() {
		this.control();
                alert("!!");
    }
});

이걸로 1차 세팅은 끝이다. 

Viewport나 MVCController 파일을 보면 Ext.defind에 mvc.xxxxx 라고 주었는데

mvc <<< 이 명칭은 바로 mvc.js에서 정의해준 name명이다.

프로그램 이름이라고 생각하자!!  

그리고 mvc.view <<< 이것은 폴더구조를 의미하는듯 하다

마지막은 각각의 파일 명칭인대 될수있으면 파일명이랑 일치시켜주는게 편할듯 하다.

통일을 안시켜주게되면 몇가지 번거로운점이 생기기때문...;;;  

자 그럼 실행을 해보도록 하고 MVCController에서 init하였을때 alert이 화면에 뜨면 

1차 연동은 성공한것이다!

위 화면처럼 떳는가!!   

그렇다면 MVC 중 C의 CONTROLLER 연동은 끝난것이다.

다음은 V의 VIEW 연동을 해보도록 하자!! 

간단하게 화면에 버튼을 띄워볼것이다.

그전에 위의 MVCController에서 작성한 alert은 지워주고~~

view 연동을 해봅시다.

이전 컴포넌트 시간에 버튼을 생성했을때 기억나는가??

renderTo 를 html의 body로 주고

panel이나 formpanel을 주고 그놈들의 items영역에 xtype을 주어서 컴포넌트 생성을 하였었다.

mvc는 renderTo는 필요없고 똑같이 

viewport내에 items에 컴포넌트 선언을 해주는것이다 

viewport.js 파일에 extend와 같은 depth로 items를 선언하고 그 자식으로 xtype : 'button'을 주도록 하겠다.

viewport.js  추가코드

items : [
    	{
    		xtype : 'button',
    		text : '버튼클릭'
    	}
],

그럼 실행을 해볼까나?

화면에 버튼이 떴다면!! 

바로바로 다음내용 진행!! 쉴틈이 없어요~

바로 버튼 클릭 이벤트로 ExtJS의 메시지ALERT 창을 띄워 보도록 하자

기능을 구현하는 부분은 아까 위에 적었지만 컨트롤러 부분에 적용하도록 하겠음

자 controller를 보면 init 함수내에 

this.controller() <<< 이렇게 준것이 있을것이다.

이부분은 특정 타겟 + 이벤트를 정의하는 것인대 다음과 같이 추가를 할수 있겠다.

this.control({
        //이 버튼은 현재 웹페이지상의 존재하는 xtype이 button을 말하는것
	'button' : {
		//클릭이벤트 발생시 현재 컨트롤러의 messageAlert이라는 함수를 호출
		click : this.messageAlert
	}
});

click : 이거 다음에 준 messageAlert이라는 함수를 생성해주도록 하자

함수의 위치는 init과 같은 depth에 위치한다.

 //이거 호출한다.
 messageAlert : function(btn){
    	//기능은 
    	Ext.MessageBox.show({
			title : 'MVC alert',
			msg : '버튼 클릭!!(button click!!)',
			buttons : Ext.MessageBox.YES,
			icon : Ext.MessageBox.INFO
    	});
    }

실행한번 하도록 해보자

1. 화면 띄우기

2. 버튼 클릭

자 viewport -> 버튼을 클릭할때 이벤트를 controller로 하여 호출하게 해보았다.

mvc 맛보기 정도라고 해야할까?

아마 처음에는 익숙하지 않아서 이해가 잘 안될수도 있지만 mvc기반으로 게속 진행하다 보면 

mvc가 편하고 쉽다는것을 느끼게 될것이다.

다음장에서 이어서 진행하도록 하겠다

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

기존에 단순 textarea로 내용을 작성해서 db에 넣었다면,  이번에는 HTML에디터를 이용하여 

텍스트를 꾸며보도록 하자

와우~~~ 

HTML에디터는 별도의 설명이 필요 없을듯... 

그냥 에디터 출력 -> 편집 -> 에디터로 작성한 텍스트 출력  이정도만 다루도록 하겠다.

(사실 사용해본적 없어서 -_-;; 미니프로젝트 할때나 자세히 들여다 봐야 할듯... 

우선 설정이 안되있는 분이시라면 다음 페이지를 참고하도록 하자

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

설정이 되었다면 이제 html 에디터를 출력하도록 해보자

폼패널안에 xtype 이 htmleditor을 선언해주고 fbar에 버튼을 하나 만들어준후 버튼 클릭 이벤트시 msg창으로 에디터의 text 값을 출력해보도록 하자

이번부분은 별도로 설명하는 내용이 없어서 소스 + 주석을 참고하도록 하자

Ext.onReady(function(){
//폼패널
 Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - SIMPLE HTML EDITOR',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					// HTML 에디터 생성
					xtype: 'htmleditor'
				}
			],
			fbar : [ 
			        {
			        	xtype : 'button',
			        	text : '에디터 내용출력',
			        	//버튼 클릭이벤트
			        	handler : function(btn){
			        		//콘솔로 HTML 태그 확인
			        		console.log("HTML EDITOR GET TEXT",btn.up("form").down("htmleditor").getValue());
			        	}
			        }
			 ]
	   });
});

뭐 아무것도 없다.. 에디터도 그냥 default 로 되있어서 레이아웃같은것들이 엉망진창이다.

해당 부분 에디터는 심플 프로젝트 진행하면서 좀더 다듬은 내용으로 진행하도록 하겠음..

실행하여 화면 출력을 하고 버튼으로 데이터를 출력해보자

1. 화면출력

2. 에디터 작성

3. 버튼 클릭

콘솔에 내용뿐만 아니라 HTML 태그까지 읽어왔도다~~

DB에 텍스트 내용을 넣는다면 

MYSQL / MSSQL = TEXT TYPE

ORACLE = CLOB 

타입으로 만들어진 컬럼에 넣어줘야 할듯?? ㅎㅎ

다음장부터는 드디어 ExtJS MVC 기반으로 강의 진행을 하도록 하겠다 

초반에는 흐름만 이해한다면 MVC 기반이 훨씬 쉬울것이다.

솔직히 본인은 MVC로 개발하는게 편하다 

VIEW + EVENTS 들을 한페이지 모두 넣으려면 코드가 너무 길어져서.... 

아무튼!!! MVC의 신세계를 경험할것이다.

그런데 EXTJS5 부터 MVVM 을 지원하기 시작했는데 ... 이것도 들여다 봐야 하나 ㅠㅠ

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

원래는 지난시간을 끝으로 컴포넌트를 마무리하고자 하였으나, 몇가지를 확인해 보니 컴포넌트 몇가지를 빼먹었더라..

폼관련 강좌를 올렸을때 파일컴포넌트와 html에디터를 빼버린것!! 

오마이갓..

파일컴포넌트에 대한 설명은 크게 두가지만 설명하도록 하겠음....

1. 기본 파일태그로 서버에 파일전송

2. 파일버튼만보여주고 파일첨부시 서버에 파일전송

이두가지를 다루어 보도록 하겠다으~~ 

설정이 되지 않은 상태라면 다음 포스팅을 보며 설정을 한 후 진행하도록 하자

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

설정이 마무리 되었다면 일반적인 HTML에서도 우리는 파일전송을 해주기 위해서 보통 form태그 안에 넣고 submit을 날린다.

이와같이 formpanel안에 filefield를 정의해주자

1. 기본파일 태그로 서버에 파일 전송하기 

Ext.onReady(function(){
	   //폼패널
	   Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - 파일첨부',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					//<input type="file" /> 와 같은개념
					xtype : 'filefield',
					//기존에 않넣어도 됐었는데 추가된듯...
					reference: 'basicFile',
					name : 'uploadFile',
					fieldLabel : '파일첨부',
					//fieldLabel의 위치 
					labelAlign : 'left',
					allowBlank : false,
					// html5의 placeholder와 유사하다
					emptyText : 'Add SQL File...',
					// 속성을 정의안하면 default Browser.. 으로 버튼이 생성된다.
					buttonText : '찾아보기'
				}
			],
			fbar : [
				{
					//서버에 SUBMIT을 하기 위한 버튼
					xtype : 'button',
					text : '파일전송',
					//클릭이벤트 발생
					handler : function(btn){
						//form패널객체를 얻는다
						var frm = btn.up("form").getForm();
						//뭐 검증같은건대 그냥 써주자
						if(frm.isValid()) {
							//폼 submit 날리는 옵션 
				    		frm.submit({
				    			//url을 지정해주자
			                	url: '/uploadFile'
			                });
				    	}
					}
				}        
			]
	   })
})

위와같이 하고 서버페이지에서 파일이 제대로 넘어왔는지 확인해보자

본인은 java 기준이라 이클립스 -> 콘솔에서 파일명을 한번 찍어봤음

일반 html태그와 똑같이 formpanel안에 있는 각각의 xtype들의 값을 서버에서 받기위해서는 

각 xtype들마다 name : '서버에서받을name'

을 지정해주어야 한다.

서버 로직은 뭐 일반 파일처리하는 로직이랑 같으니 생략~~

실행화면이다.

이전다음

012

2. 파일버튼만보여주고 첨부시 서버에파일전송

다음으로는 버튼만으로 파일 처리를 해보도록 하자

말이 버튼만이지 실제로는 파일태그에 찾아보기 버튼만 보여지는 것이다.

1. 에서는 버튼 클릭이벤트로 서버에 파일을 전송하였다면, 

2.에서는 파일태그에 값이 들어가는 시점

즉, change 이벤트가 발생할때 서버에 submit 하는 방식이다.

그렇다면 아직 설명은 하지 않았지만 지금까지 강의를 하면서 한두번정도 언급을 했던걸로 아는데

이벤트 등록을 하기위해서는 리스너에 이벤트를 지정해주는 것이다.

filefield에 우선 change 이벤트가 지원되는지 extjs의 api documents 페이지를 확인하도록 하자

확인결과 지원을 해준다.

그렇다면 리스너에 change 이벤트를 한번 적용해보도록 하자

1. 기본파일 태그로 서버에 파일 전송하기  소스에 이어서 진행을 할것이다.

1) 기존소스에서 전송버튼은 필요없으니 fbar 속성을 통째로 지우자

2) 기존 xtype : 'filefield' 의 속성들을 다음과 같이 변경해주자(리스너 포함)

                                        //<input type="file" /> 와 같은개념
					xtype : 'filefield',
					//기존에 않넣어도 됐었는데 추가된듯...
					name : 'sqlUpload',
					buttonText : '찾아보기',
					buttonOnly: true,
					listeners : {
						change : function( obj, value, eOpts ){
							//form패널객체를 얻는다
							var frm = obj.up("form").getForm();
							//뭐 검증같은건대 그냥 써주자
							if(frm.isValid()) {
								//폼 submit 날리는 옵션 
					    		frm.submit({
					    			//url을 지정해주자
				                	url: '/uploadFile'
				                });
					    	}
						}            
					}

change 이벤트내에 정의된 로직은 기존 소스의 button 이벤트 발생시 적용했던 소스랑 같다.

즉, change 이벤트 발생시 서버로 form을 전송하겠다는것이다!! 

서버페이지는 변경된것은 전혀없다

버튼으로만 파일첨부하는 실행화면을 보도록 하자

이전다음

01

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