이번에는 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. 버튼이벤트 발생 후

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

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

오랫만에 ExtJS에 관해서 포스팅을 하게되었습니다!! 

ㅜ.ㅜ 한동안 jQuery 소개하는거만 올려서 ㅠ,ㅠ ㅋ 

오늘은 전에 작성했던 Grid panel 그 두번째 방식에 대해서 작성을 하도록 하겠습니다.

'다'나'까'는 빼도록 하겠음.. 

첫번째 방식은 memory방식을 했었고~ 

이번시간에는 proxy type이 ajax인 그리드 패널을 테스트 해보기로 하겠음!!

Ajax를 이용하여 그리드에 데이터를 뿌리는데 json 타입으로 list만 뿌려보자!!!

Create

Read

Update

Destroy

방식중 이번시간에는 서버페이지에서 ajax Read 해서 그리드에 뿌리는 방식을 해보겠다.

그외의 Create/Update/Destory는 그리드 게시판 예제를 진행할때 한꺼번에 진행 하고자 한다.

jsp 기준! 해당 라이브러리를 받아서 연동테스트를 따라하시길..

php부분은 자체적으로 json_encode인가 지원해주는게 있는걸로 알고 있음.

본인은 jsp로 샘플링 하는거라 jsp 개발하시는 분들일 경우 다음 라이브러리를 

다운받으셔서 lib 디렉토리에 넣으세요

https://code.google.com/p/json-simple/downloads/detail?name=json-simple-1.1.1.jar&can=2&q=

현재 최종버전은 json-simple-1.1.1.jar 네요...

자그럼 기존 샘플을 가지고 추가 작업을 진행 ㄱㄱ 

전에 memory타입 소스를 기준으로 약간만 변경할것임 

memory로 강제로 grid store안에 데이터를 고정해서 뿌렸다면, 이번방식은 ajax를통해서 json방식으로 서버에서  던져줘서 해당 값을 자동적으로 grid내에 뿌리는 연동을 해본다.

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

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

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

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

비록 결과 위주로 보여주는 방식이지만 처음부터 천천히 진행하고 소스 분석을 하신다면 이해는 

모두들 금방하실거라 믿습니다.

기존에 있던 data 속성값을 빼고 해당 부분은 gridData.jsp라는 페이지에서 ajax 호출하여 

json값을 return 받아 자동으로 그리드에 뿌려줄 것이다.

여기에서 약간 수정해주어야 할 부분이 있다.

store 속성에 autoLoad : true를 주어야 한다.

그래야지 화면이 onLoad되면서 자동으로 ajax 통신이 이루어져 그리드 내에 데이터를 뿌려준다.

그리고 proxy json 속성값 중에서 

type이 'memory' 인 부분은 'ajax' 라고 변경을 해준다.

그리고 추가로 필요한 속성은

url / reader이다.

url은 비동기 방식으로 json을 불러오 주소이다.

reader는 json을 읽어올때 필요한 속성값이다.

db에서 예를 들면 select 구문을 처리할때 사용하는 속성값이다.

reader json내에 다양한 속성값들이 또한 존재하지만 

type / root 속성만 이용하기로한다.

뜨문뜨문 설명만 하니 도통 무슨이야기인지 모르겠다.

이전 소스와 변경된 소스를 비교분석 해보자.

store부분만 비교하도록 하겠다.

1. memory type

store : Ext.create('Ext.data.Store',{
	           fields : [
	               {
	                   name : 'title1'
	               },
	               {
	                   name : 'title2'
	               }
	           ],
//data json배열은 그리드내에 뿌려질 데이터 목록을 의미한다.
	           data : [
	               {
	                   title1 : '첫번째 값',
	                   title2 : '두번째 값'
	               }
	           ],
//별도의 호출이 필요없으므로 proxy type을 memory로 함
	           proxy : {
	               type : 'memory'
	           }
	            
 })

2. ajax type

 store : Ext.create('Ext.data.Store',{
	           fields : [
	               {
	                   name : 'title1'
	               },
	               {
	                   name : 'title2'
	               } 
	           ],
                    // ajax타입으로 load시 자동으로 화면에 뿌려주기 위해서는 
                   // autoload 속성값을 true로 주어야 한다.
	           autoLoad: true,
	           proxy: {
                                //기존 memory -> ajax 타입으로 변경
			        type: 'ajax',
                                //비동기방식 호출 URL
			        url: '/gridData.jsp',
                                //reader가 있어야 서버에서 받은
                                //데이터목록객체를 읽을수 있다.
			        reader: {
                                   // json 방식으로 받을것임
			            type: 'json', 
                                   // json object의 key값을 'item'이라고 정함
			            root: 'item'
			        }
			    }
	            
})

무언가 조금 변경이 되었다.

2. ajax type의 조건변경은 다음과 같다.

ajax 방식으로 gridData.jsp를 호출하여 json object를 가져올것이다. 

단, json key값이 item인 json 객체를 읽음.

그렇다면 마지막으로 json 객체를 생성해보자

위에 이미지 출력시킨 gridData.jsp 출력물 그대로 만들것이다.

import할 json객체 패키지는 org.json.simple이다.

spring으로 예를 하려면 json simple을 이용하셔도 되고 spring에서 자주 설명하는 jacson인가 

그걸 사용해도 됨 php는 json_encode??? 그걸 사용하면 될것임..

그럼 json 파싱 소스내용이다.

// jsonObj는 최상단 root key값이 될 객체
JSONObject jsonObj = new JSONObject();
// jsonArray에 각각의 값을 담아줄 json 객체
JSONObject jsonObj2 = null;
// jsonObj2에서 담아서 json 리스트 객체에 담는다.
JSONArray jsonArr = new JSONArray();

// 각각 신규 생성하여 jsonarray에 추가추가
jsonObj2 = new JSONObject();
jsonObj2.put("title1", "title1111");
jsonObj2.put("title2", "title2222");
jsonArr.add(jsonObj2);

// 각각 신규 생성하여 jsonarray에 추가추가
jsonObj2 = new JSONObject();
jsonObj2.put("title1", "title3333");
jsonObj2.put("title2", "title4444");
jsonArr.add(jsonObj2);

// 각각 신규 생성하여 jsonarray에 추가추가
jsonObj2 = new JSONObject();
jsonObj2.put("title1", "title5555");
jsonObj2.put("title2", "title6666");
jsonArr.add(jsonObj2);

// 각각 신규 생성하여 jsonarray에 추가추가
jsonObj2 = new JSONObject();
jsonObj2.put("title1", "title1111");
jsonObj2.put("title2", "title2222");
jsonArr.add(jsonObj2);

//클라이언트쪽 root 값에 맞춰주어야 하므로 key값을 item이라 정함
jsonObj.put("item", jsonArr);

//마지막으로 내보냄
PrintWriter pw = response.getWriter();
pw.print(jsonObj);
pw.flush();
pw.close();

다음과 같이 작성이 완료되고 실행을 하면 다음과 같이 출력이 될것이다.

서버측 콘솔을 통하여 json타입을 문자열로 찍어본거고 크롬브라우저에서는 각각의 데이터들이

잘 나온것을 확인 할 수 있었다 

참고해야할점은 

jsonarray에 담은 jsonobject들에 대한 key = Ext.data.store -> fields -> name

이어야 한다!!  명심하도록 하자

도움이 되셨다면 손가락↓ 클릭! 궁금하신점은 댓글!!