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

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

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

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

예를들어 트리의 노드를 우클릭한다거나 혹은 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

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

자 이번에는 탭패널에 대하여 설명을 하고자 한다.

탭패널의 장점은 탭별로 구분을 하여 역할을 나누는데 효율적이다.

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

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

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

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

첫번째 탭에는 6장에서 샘플링한 grid memory 타입을 출력할것이고

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

두번째 탭에는 9장 기본 폼들을 출력할 것이다.

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

동적으로 추가되는 탭패널에 대해서는 다음장에 설명하도록 하겠다.

1. 탭패널에 대한 기본구조는 다음과 같다.

Ext.create('Ext.tab.Panel',{
	       renderTo : Ext.getBody(),
	       items : [
    				//각각의 탭을 넣어줄 영역
    			]
})

items json 배열속성안에다 각각 기술할것인대, formpanel과 grid memory 에대한 코드가 

워낙 길다...

그러니 각각의 소스들을 가져와 변수에 담을것이다.

단, 각 코드들의 renderTo : Ext.getBody() << 요놈은 지우고 변수에 담자.

1. 그리드 패널에 대한 소스는 var grid 변수에 담아주고

    * 탭패널에 대한 타이틀을 정의해주기 위하여 Ext.grid.Panel 속성중, title : '그리드샘플' 

      속성을 추가하자

      이전글에서는 title 속성은 사용하지 않았음

2. form패널에 대한 소스는 var form 변수에 담아주자

(그리드,폼패널 둘다 renderTo 속성을 빼도록 하자)

1,2 번에 대한 코드는 해당 내용에서는 제외하도록 하겠다.

1,2번에 대한 코드를 각각의 변수에 대입하였다면 

tabpanel -> items json 배열에 넣어주자

                       {
	                	xtype : grid	
	                },
	                {
	                	xtype : form
	                }

위의 json객체들을 items 속성에 넣게 되면 다음 화면처럼 출력이 되는것을 확인 할 수 있을것이다.

1. 첫번째 탭화면

2. 두번째 탭화면

와우 잘나온다 ㅎㅎㅎ 

ExtJS MVC 패턴으로 하면 조금더 심플해지긴 하나.... 

우선은 컴포넌트 출력이해가 먼저라고 생각하므로 MVC에 대한 내용은 컴포넌트 강좌를 

모두 마친후에 진행 하도록 하겠음

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