목    표

● 어떻게 파일을 서버에서 받는가?

● html 폼을 비동기방식으로 파일과 함께 전송을 할수 있는가?

개발환경

● 이클립스

● IE / 크롬브라우저

● jdk 1.7 / tomcat7

사용 스크립트

● jQuery  [다운로드] 

    또는 

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

● jQuery Form Plugin [다운로드]

● html 페이지 부분

1) html페이지에 jquery와 jquery form 플러그인을 import 해주자         

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="/js/jquery.form.js"></script>

2) jQuery form 플러그인을 사용하여 ajax 전송하는 스크립트를 넣어주자

    * 전에 button태그로 진행했었지만, submit 태그로도 해도 무관하니 input type="submit" 

      으로 해주자

$(function(){
	//폼전송
	$('#ajaxform').ajaxForm({
	   //보내기전 validation check가 필요할경우
            beforeSubmit: function (data, frm, opt) {
			                alert("전송전!!");
			                return true;
			              },
            //submit이후의 처리
            success: function(responseText, statusText){
            	alert("전송성공!!");
            },
            //ajax error
            error: function(){
            	alert("에러발생!!");
            }                               
          });
});

3) html태그를 작성해주자

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="submit" value="Submit" />
</form>

위와같이 코드를 한후 서버에서 데이터들정보를 받아보면 정상적으로 데이터및 파일들을 받을수 

있는것을 확인할수 있다.

두번째 방법으로는 FormData() 객체를 사용하는 것인대 IE9부터인가부터 지원이 되는걸로 

알고 있다.

시범삼아 이방법으로도 테스트를 해보자

두번째방법은 jquery 만 있으면 됨 jquery form plugin 필요없음(x)

ajax 파일업로드 두번째방법 스크립트부분

	$(function(){
          $("#btn").click(function(){
        	  var formData = new FormData();
        	  formData.append("test2", $("input[name=test2]").val());
        	  formData.append("test3", $("textarea[name=test3]").text());
        	  formData.append("test4", $("input[name=test4]")[0].files[0]);
        	 
        	  $.ajax({
        	    url: '/saveFileTest.do',
        	    data: formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    success: function(data){
        	    	alert("EE");
        	    }
        	  });

          });
	});

ajax 파일업로드 두번째방법 html 부분

<form id="ajaxform" action="/saveFileTest.do" method="post" enctype="multipart/form-data">
		<input type="text" name="test2"/><br/>
		<textarea rows="10" cols="10" name="test3"></textarea><br/>
		<input type="file" name="test4" />
		<input type="button" id="btn" value="전송" />
</form>

괜찮지 아니한가

이번시간에는 ajax 통신으로 콤보박스에 option 리스트를 담아보도록 하겠슴돠..

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

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

이번에는 지난 시간 소스를 변경하여 ajax 타입으로 별도 URL에서 json을 생성후 받아서 combobox의 option list를 출력해보도록 하겠다.

지난소스관련해서는 다음 링크를 참고하시길...

2014/06/24 - [자바스크립트이야기/Ext JS] - [ExtJS강좌10] 폼을 화면에 출력하기 (2) - 콤보박스1

ajax로 json을 파싱하기 위해서는 Grid에서 ajax로 서버호출하여 json을 받아온 jsp 링크페이지를 참고하고 연동을 하자

2014/06/23 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 7]그리드패널 - 두번째 편 ajax type!!

그리드패널에서 ajax으로 호출한 jsp 페이지의 json 파싱하는 로직은 같고 

다만 다른점이 있다면 json object의 key값을 name/value라고만 변경하였다.

json-simple 라이브러리를 사용한것도 그대로고  서버에서 json 넘겨주는 페이지의 로직은 모두 

같다!

이제 서버 호출용 json 파싱하는 jsp 페이지는 만들어 주었으니 html소스일부를 수정해보자

원래의 comboData변수는 필요가 없다! 과감히 삭제!!

store에서의 data  : comboData역시 필요 없다 삭제!!

대신~ proxy라는 걸 이용하여 ajax 호출관련 코드를 삽입하자

그럼 store부분은 다음과 같이 코드가 짜여질 것이다.

 //json 배열객체
	   var combostore = Ext.create('Ext.data.Store', {
	 	     //comboData의 key/value 구분
	 	    fields: ['name','value'],
		    //key/value값이 들어간 comboData 변수가 목록이 된다.
		    proxy: {
		    	//ajax type
	            type: 'ajax',
	            // 호출 URL
	            url: '/comboResult.jsp',
	            //목록 조회시 서버로부터 넘어오는 json read
	            reader: {
	            	// return type 지정
	                type: 'json',
	                // root json key값
	                root: 'item'
	            }
	        }
  })

아참! 그리고 콤보박스 수정중, value : 'value1', <<< 이놈도 지워버리자!!

최초 호출시 comboData 변수로 처리했을때와 다르게 combobx 초창기 값은 빈값으로만 나와있을 것이다. 뭐이곳에 값을 넣을 선택여부는 다음에 생각나면 포스팅 하겠음!!

실행을 해보자~~

1. 최초 load된  화면

2. select 클릭시 aajx 호출하려는 loading bar

3, ajax 호출은 지정된 key/value형식에 따른 json data list

4. select box option에 마우스 오버하여 focus 이동된 상태

5. option 값 select!!

콤보박스 ajax 호출 끝~ 

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

지난번에는 ExtJS에서 제공하는 입력 폼들을 띄워보았슴돠

이번장에서는 지난번에 언급했던!!!

html태그에서 select 태그와 유사한 combobox를 진행하도록 하겠음!!

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

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

콤보박스는 이전 form태그들과 다른점이 있다면 store로 값을 받아와 key/value를 뿌려주는 

형식이다.  일반적으로,

<select>

<option value="1">값</option>

</select>

에서 store(ExtJS의 저장소!!)가 option태그에 해당하는 리스트 들을 의미한다.

demo화면의 소스를 보면 tpl형식으로 콤보박스 목록을 뿌리는게 있던대..

본인은 그냥 store에 받아서 key/value 세팅만 하도록 하겠다 ㅎㅎㅎ

뿌려주는 방식은 그리드 시간에 했던방식처럼 

1. data를 임의의 json array객체에 값을 넣어서 combobox 리스트에 뿌려주는 방식

2. ajax를 통하여 json객체를 combobox 리스트에 뿌려주는 방식

이 두가지를 다루도록 하겠다.

이번장에는 1.에 해당하는 부분을 다루도록 하겠다.

첫째로 필요한것은 가상의 데이터이다. 

select option의 value에 해당하는 값과 option이 보여줄 text 부분을 json array 변수로 만들어 보겠다.

//json 배열객체
	   var comboData = [
		                    {
		               			"name" : "콤보1",
		               			"value" : "value1"
		                    },
		                    {
		               			"name" : "콤보2",
		               			"value" : "value2"
		                    }
	                    ]

위의 데이터로 combobx의 <option></option> 값으로 출력을 할것이다!!

다음은 <option></option> 리스트를 만들어서 담아주어야 할 store 변수를 만들어 보자 

var combostore = Ext.create('Ext.data.Store', {
 	     //comboData의 key/value 구분
 	    fields: ['name','value'],
	    //key/value값이 들어간 comboData 변수가 목록이 된다.
	    data: comboData
   })

마지막으로 formpanel안에다가 xtype 이 콤보박스를 생성하면서~ 실제로 화면에 표출해야할 store를 combostore로 선언을 해야한다.

          //폼패널
	   Ext.create('Ext.form.Panel',{
		   //폼패널 타이틀
		   title : '폼패널 - 콤보박스 출력',
		   //지정위치
	       renderTo : Ext.getBody(),
	       items : [
				{
					//<select></select> Ext.form.field.ComboBox로 create가능
					xtype : 'combo',
					//label
					fieldLable : '콤보박스예제',
					//combo width
					width : 300,
					//화면에 보여질 값
					displayField: 'name',
					//실제 선택값
			        valueField: 'value',
			        //초기 선택 value값
			        value : 'value1',
			        //상단에 만들어놓은 comboData json 배열객체를 담기위한 store
					store : combostore 
				}
			]
	   })

위와같이 작성을 해보았다면 실행하여 option을 변경해보자

위의 combobx 예제는 sencha에서 제공하는 example combo랑 약간은 틀릴것이다.

화면 출력에 의미없는 속성들은 우선 제거 하였다.

물론 이벤트 발생시 필요한 속성이 있을 수 있겠지만,

단순 화면에 option list를 출력하기위해서는 의미 없는것으로 판단되어 제외해버렸다.

부분부분 필요한 것은 추후 MVC 강좌 시간에 추가적으로 넣어서 작업을 해보도록 하겠다!!

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

이번에는 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 하거나 기타 속성값들에 따른 부분은 심플강좌에서 다루도록 하겠다!!

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

작업하다보면 하나의 그리드에서 동적으로 컬럼 및 데이터를 변경할때가 있을 것이다.

이럴때 사용하는 메서드가 reconfigure이다.

사용방법은

grid객체.reconfigure(새로적용할store,새로적용할컬럼model);

이다.

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

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

해당 부분 역시 링크(이전강좌인 memory 타입의 grid 포스팅)의 소스를 약간 변경하여 만들어 보도록 하겠음..

2014/06/09 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 6]그리드패널 - 첫번째 편 memory type!!

기존 memory타입의 소스에서 추가적으로 어떠한 이벤트 발생시 그리드 재설정이 되도록 해야 

하므로 버튼을 하나 생성하도록 해보겠다. grid에 툴바를 생성하여 버튼을 만들도록 하겠다.

기존 그리드에 

다음과 같은 json array를 추가해주자

tbar: [
	{
		xtype: "button",
		text: "그리드재설정", 
		handler : function(btn){
			var grid = btn.up("grid")
		        grid.reconfigure(store2,model2);
		}
	}
 ]

툴바옵션에 xtype 은 html태그의 <input type=""> 과 유사하다고 보면 되겠다.

xtype을 버튼태그로 주고 "데이터재설정" 이란 text버튼을 만들었다. 

handler는 button 태그의 onclick 이벤트와 같다.

즉, handler -> 클릭이벤트 발생시 grid 객체의 reconfigure 해주는 것인대.

btn.up("grid") <- 이놈은 jquery의 셀렉터와 유사한 개념이다.

$(this).parent()... 이런형태인셈이다.

ExtJS 셀렉터로 그리드 객체를 찾은 후, 위에 설명했듯이

grid객체.reconfigure(store2라는 새로운 store변수, model2라는 새로운 컬럼정의 변수);

를 주었다.

이어서 store2와 model2에 대한 변수에 담겨진 json 객체들을 정의를 해주자

var store2 = Ext.create('Ext.data.Store',{
      		fields : [
	  	               {
	  	                   name : 'title1'
	  	               },
	  	               {
	  	                   name : 'title2'
	  	               },
	  	               {
	  	                   name : 'title3'
	  	               },
	  	               {
	  	                   name : 'title4'
	  	               }
	  	           ],
	  	           data : [
	  	               {
	  	                   title1 : '첫번째 값',
	  	                   title2 : '두번째 값',
	  	                   title3 : '세번째 값',
	  	               	   title4 : '네번째 값'
	  	               }
	  	           ],
	  	           proxy : {
	  	               type : 'memory'
	  	           }
	  	            
  	       });
        var model2 = [];
	//store에 정의된 컬럼과 일치하는 name이 4개이므로 컬럼을 4개 생성한다 - fields의 name을 맞춰준다
  	for(var i=0; i<4; i++) {
  		model2.push(
  			{
  			//그리드 컬럼에 보여줄 컬럼명
			text:  'Title'+(i+1),
			//그리드 넓이 조절
			flex:  1,
			//dataIndex : store -> fields name명과 동일시 해준다.
			dataIndex: 'title'+(i+1)
			}
  		);	
	}

각각의 store2/model2 변수에 각각의 기능을 담아주었다.

이제는 reconfigure(xxxx,xxx)에 변수들을 담아만 주면 컬럼재설정이 완료가 된다.

소스를 한번 동작시켜보도록 하자!!

1. 버튼 클릭전 (onLoad)

2. 버튼이벤트 발생 후

^______________________^ 잘 동작되는고만!!!

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