xtype이 dataview를 이용하여 리스트형식의 화면을 출력할 수 있다.

이전과 좀 다른것들이 있다면 -_-a 개별 css를 제작하여 tpl이란 놈을 이용하여 목록을 

출력하는것이다.

"tpl" 속성이란 정확한 역활이 뭔지는 모르지만 보통 프로그램 코드들중, for문으로 이해를 하면 

쉬을듯...

sencha demo페이지를 보면 dataview를 이용하여 이미지 리스트를 뿌리는데 이해하기 어려워서 feedview의 좌측 어코디언의 리스트를 참조하여 심플하게 만들어 보았다.

dataview는 css를 제작하여 class를 적용해야하므로 간단하게나마 feed-viewer의 css를 참조하여 class 만들어보겠음!! dataview는 css빨임  

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

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

1. css 코드 먼저 생성을 해보자

	.feed-list {
	    padding: 0 3px 0 3px;
	}
	
	.feed-list-item {
	    margin-top: 3px;
	    padding-left: 20px;
	    line-height: 20px;
	    cursor: pointer;
	    border: 1px solid #fff;
	}
	
	.feed-list-item-hover {
	    background-color: #eee;
	}
	
	.feed-list .x-item-selected {
	    font-weight: bold;
	    color: #15428B;
	    background-color: #DFE8F6;
	    border: 1px dotted #A3BAE9;
	}

2. dataview를 화면에 출력해보자

    - xtype : 'dataview' = Ext.view.View 이다 (documents 문서를 참고해보면 확인할 수 있다)

    - 꼭 Ext.view.View를 이용할필요는 없다. panel안에 items영역에다 xtype:'dataview'로 

      해주어도 무관하다.

Ext.onReady(function(){
	   //dataview 생성
	   Ext.create('Ext.view.View',{
		   //지정위치
	       renderTo : Ext.getBody(),
	       //store에 담겨진 데이터들을 tpl for="." 를 이용하여 화면에 출력한다.
	       //Ext.XTemplate : 템플릿을 생성
	       //store에 있는 fields명과 매칭을 시키면 {fields명} 식으로 값을 넣어줄수 있다.
		   tpl: new Ext.XTemplate('<tpl for="."><div class="feed-list-item">{title}</div></tpl>'),
		   trackOver: true,
		   //memory타입으로 해서 출력가능하지만 ajax 타입으로 하여 서버에서 json으로 데이터를 받아왔다.
           store : Ext.create('Ext.data.Store',{
 	           fields : ['title'],
 	 	           autoLoad: true,
 	 	           proxy: {
 	 			        type: 'ajax',
 	 			        url: '/dataviewData.jsp',
 	 			        reader: {
 	 			            type: 'json', 
 	 			            rootProperty: 'item'
 	 			        }
 	 			    }
	 	        }),
	 	    //기본 클래스 적용
            cls: 'feed-list',
            //각 dataview list의 클래스적용
            itemSelector: '.feed-list-item',
            //마우스 오버시 적용되는 클래스적용
            overItemCls: 'feed-list-item-hover'
	   })
})

3. 마지막으로 store에서 호출한 dataviewData.jsp페이지 (서버페이지)에서 json 데이터를 만들어서 클라이언트로 보내주자

자바 기준으로 설명할것이라, 

spring을 이용하시는 분들은 잭슨라이브러리??로 json을 파싱하시면 될것이고

일반 jsp로 하신다면 json-simple jar 라이브러리를 등록해주자

파일첨부

json-simple-1.1.1.jar

PHP는 자체제공하는 json함수를 사용하자

JSONObject jsonObj = new JSONObject();
JSONObject jsonObj2 = null;
JSONArray jsonArr = new JSONArray();
jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴1");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴2");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴3");
jsonArr.add(jsonObj2);

jsonObj2 = new JSONObject();
jsonObj2.put("title", "메뉴4");
jsonArr.add(jsonObj2);
jsonObj.put("item", jsonArr);
PrintWriter pw = response.getWriter();
System.out.println(jsonObj.toString());
pw.print(jsonObj);
pw.flush();
pw.close();

이걸로 xtype이 dataview강의는 끝났음~

심플하지만 복잡해지면 한없이 복잡해지는것이 dataview이다.

템플릿이라는 경우의 수가 너무 많기 때문...

 실행 화면

이전다음

0123

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

타 브라우저간에 데이터를 주고받는 방식이 필요할때가 존재한다.

이럴경우 ajax로는 서로다른 도메인으로는 지원을 하지 않는다.

하지만 대안으로 나온 방법이 jsonp방식이다.

(조건은 서버측 코드를 핸들링할수 있어야 한다는 조건이다.)

클라이언트측 스크립트 소스는 다음과 같다. 

클라이언트측 포트는 8080이다

$(function(){
	$("#btn").click(function(){
		$.ajax({
				//호출할 원격URL
			    url : "http://localhost:7070/index.jsp",
				//jsonp방식으로 값을 받겠다.
			    dataType : "jsonp",
			 	//서버측에서 request.getparameter를 하여 받기위한 jsonp의 name
			 	//빼주게되면 default request.getParameter("callback") 으로 받게된다.
			    jsonp : "callback",
			    //async는 왜있는지 모르겠지만 jquery 1.8버전부터 jsonp에 같이 적용하라고 적혀있는듯한
			    //영어가.... 영어울렁증임 ㅠㅠ
				async: false,
				//success는 일반 json 방식과 같음
			    success : function(data){
					console.log("result data object",data);
			    }
			});	
	});
});

html태그는 그냥 버튼 하나만 존재한다.

<input type="button" id="btn" value="jsonp호출" />

원격지 소스관련 코드이다.

ExtJS 강좌에서도 내용을 올려놓았으나 jQuery 보시는분들을 위해서.... 

Spring 개발자는 해당 라이브러리를 이용하여도 무관하나 보통은 jackson 을 사용하는듯 하다

본인은 일반 jsp페이지로 샘플링을 할것이며

PHP환경은 PHP자체적으로 지원하는 함수를 이용하길 바람.

java 환경에서는 json-simple 라이브러리가 필요하다.

[다운로드 라이브러리]

json-simple-1.1.1.jar

별도로 사용하고계신 라이브러리가 있으시다면 무시하셔도 상관없음

서버 코드 부분

서버측 포트는 7070이다.

//클라이언트측 jsonp 속성의 지정해준 value값 =  callback이라 callback으로 받았음
String callBack = request.getParameter("callback");
//단순한 success object 생성
JSONObject jsonObj = new JSONObject();
jsonObj.put("success", true);
//다시 클라이언트로 던져준다/
PrintWriter pw = response.getWriter();
//대신, 클라이언트측에서 받은 callBack parameter + "(" + jsonObject의 문자열 + ")"
//형식으로 response 해주어야 함
pw.print(callBack+"("+jsonObj.toString()+")");
pw.flush();
pw.close();

위와같이 하게되면 jsonp받식으로 클라이언트의 $.ajax부분인 success 부분에서 값을 받을수있을것이다!! 

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

보통 일반 설치형 프로그램들을 보면 우클릭을 하여 컨텍스트 메뉴를 띄우게 된다.

이때 필요한 조건은 어떠한 영역을 지정해주어야 한다는것이다.

예를들어 트리의 노드를 우클릭한다거나 혹은 dataview의 list들을 우클릭한다를 의미한다.

아마 itemcontextmenu listener를 지원해주는 속성이라면 무엇이 되었든간에 사용이 가능하다.

본인이 알고있는선에서는 treepanel, dataview,gridpanel 이정도이다. 

itemcontextmenu 이벤트 지원여부는 

sencha에서  제공하는 documents 문서를 보면서 확인을 해야 할것이다.

http://docs-origin.sencha.com/extjs/5.0.0/apidocs/

다음 문서화면우측상단을 보면 검색창이 있는데 

본인은 treepanel을 이용하여 treepanel -> events를 확인 한 결과 

itemcontextmenu가 있다는것을 확인하였다.

즉, 우클릭으로 메뉴를 지원한다는것이다.

리스너는 언급한적이 없지만 쉽게 말해 어떤한 이벤트 동작이 발생을 할때 함수로 기능및 별도로 기능구현을 하는것을 의미한다.

리스너 역시, MVC 심플 프로젝트에서 자세히 설명하도록 하겠음.

이번장의 목표는 우클릭하여 메뉴를 띄우는것이니 신경쓰지 말고 따라하여서 결과물을 출력하는것에 의미를 두자!!!

트리패널을 다시 처음부터 제작하기 귀찮으니 

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

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

전에 만들어두었던 memory type의 트리패널에 추가로 우클릭이벤트를 등록해보자

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 13]트리패널(treepanel) - 첫번째 편 memory type!!

해당 소스기준으로 진행을 해보도록 하겠다.

우선은 추가로 필요한 준비물은 다음과 같다.

1. 우클릭시 필요한 메뉴컴포넌트

2. 트리패널에서 우클릭이벤트를 받기위한 itemcontextmenu 이벤트 리스너

우선은 첫번째로 메뉴컴포넌트 하나를 별도로 생성하여 rightmenu변수에 담아놓자.

* create만 한다고 나오지는 않음.

var rightMenu = Ext.create("Ext.menu.Menu",{
					   items : [
				        	{
				                text: '우클릭 메뉴1'
				        	},
				        	{
				        		text: '우클릭 메뉴2'
				        	}
				        ]
					});

다음으로 우클릭 이벤트리스너를 treepanel에 등록을 해주자

listener속성내에 정의되어야 하는데 해당 위치는 renderTo 와 같은 depth에 추가해주자

renderTo와 같은 구조로 treepanel 일부코드를 보여주면 다음과 같다.

                 renderTo : Ext.getBody(),
                 //기존소스에 해당 부분만 추가
       		 listeners : {
		    	   itemcontextmenu : function( obj, record, item, index, e, eOpts ) {
                                   //기본 우클릭 이벤트를 막기위한 함수다.
		    		   e.stopEvent();
                                   //이번에 정의한 rightMenu변수를 보여주기 위한 showAt함수다 e.getXY()가 파라미터로 들어가있는데
                                  //브라우저상의 x/y 좌표를 계산하여 마우스 포인터에다 메뉴를 보여준다.
		    		   rightMenu.showAt(e.getXY());
			  }
		 },
                //밑에는 store 속성이 존재하겠죠??

저 리스너 속성에 itemcontextmenu 이벤트를 등록하여주고 내부적으로 코드를 짜주면 

우클릭하여 메뉴컴포넌트가 마우스 포인터로부터 출력이 된다.

한번 실행하여 확인해보자

이전다음

0123

컴포넌트 관련 설명은 드디어 다음장으로 마무리 할 예정이고, 이후에 MVC에대하여 간략하게 

강의를 포스팅 한후에 본격적으로 CRUD관련 심플프로젝트를 진행 후, ExtJS는 마무리 하도록 

하겠다.

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

이번에는 메뉴바를 생성하고자 한다.

뭐 메뉴바는 심플해서 별도로 설명할 부분이 없다....

툴바에 menu라는 속성으로정의를 해주면 메뉴 목록들이 표출이 된다.

우선 컴포넌트 출력이므로 기능구현은 제하고 생성을 하도록 하겠음

현재 설명중인 모든 컴포넌트들을 CRUD 미니프로젝트를 진행할때 한꺼번에 진행하도록 하겠음.

ExtJS를 실행할 세팅이 안되있다면  다음링크를 따라서 준비하자

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

준비가 되었다면 다음 코드를 실행하여 보자 

Ext.onReady(function(){
	   Ext.create('Ext.panel.Panel',{
		   title : '메뉴예제',
	       renderTo : Ext.getBody(),
	       tbar : [
	               {
	            	   text: '메뉴1',
	            	   menu: [
	      	            	{
	      	            		text: '메뉴1-1'
	      	            	},
	      	            	{
	      	            		text: '메뉴1-2'
	      	            	}
	      	          ]
	               },
	               {
	            	   text: '메뉴2',
	            	   menu: [
	      	            	{
	      	            		text: '메뉴2-1'
	      	            	},
	      	            	{
	      	            		text: '메뉴2-2'
	      	            	}
	      	          ]
	               }
	       ]
	   })
})

바로 실행화면을 출력해보자

                     (초기화면)                              (메뉴1클릭화면)                     (메뉴2클릭화면)

어떤가 붸리 Simple 하지 않은가~~~  

이벤트 주는것은~~ 

다시 말씀드리면 MVC기반의 CRUD 미니 프로젝트 진행할때 한꺼번에 적용하도록 해보겠다!!! 

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

이번에 설명할 내용은 두개의 탭에 지금까지 배워온 내용중 일부를 삽입하여 

각각의 탭에 출력하도록 한다. 

ExtJS를 실행할 세팅이 안되있다면  다음링크를 따라서 준비하자

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

이전 15장에 대한 설명을 충분히 숙지하고 이어서 해당장을 보도록 하자

2014/06/30 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 15]탭패널(tabpanel) - 첫번째 편 - 탭 출력하기

이전까지 했던 고정 탭패널코드에 추가로 동적추가기능을 하는 함수를 넣을것이다.

항상 이벤트동작은 버튼 클릭으로 진행을 하겠죠잉?? 

fbar를 사용하여 버튼을 하단에 위치하도록 하겠다.

버튼 클릭시 이벤트에 대한 로직구현은 다음과 같다.

1. 현재 탭패널의 사이즈구하기 : 사용되는 부분에는 title구분값과 동적추가된후 추가된 탭에 focus를 맞춰주기 위해 사용된다.

2. 동적탭을 임의로 생성

3. 탭패널객체에 추가

4. 추가된 탭에 focus주기

이로직으로 진행된다.

버튼에 들어갈 소스는 다음과 같다.

 fbar: [{
  			   		xtype: "button",
  			   		text: "동적탭 추가", 
  			   		handler : function(btn){
  			   			//탭패널 object 찾기
  			   			var tabPanel = btn.up("tabpanel");
  			   			//탭갯수를 구한다.
  			   			var tabSize = tabPanel.items.length;
  			   			//동적으로 추가해줄 탭을 변수에 담는다.
	  			   		var dynamicTab ={
				            xtype        : 'panel',
				            title        : '동적탭'+tabSize,
				            closable	 : true,
				            //items를 넣어도 무관하나 sample이므로 html코드로 대체함
				            html : '동적탭탭'
	        			}
  			   			//동적추가할 탭을 탭패널 object에 추가
	  			   		tabPanel.add(dynamicTab);
  			   			//맨끝으로 focus 준다.
  			   			//해당함수를 사용안할시 포커스는 최종으로 활성화되있던 탭고정 
	  			  		tabPanel.setActiveTab(tabSize);
  			   		}
  }]

다음 로직을 구현하였다면 다음 화면과 같은 탭기능을 확인 할 수 있을것이다.

* 현재 이벤트에 대한 궁금함은 버리자 이벤트는 자바스크립트를 알고있다면  

  쉬우니 우선은 컴포넌트 생성에 대한 이해만 하도록 하자.. *

이전다음

01234

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