'웹개발강좌/ExtJS' 카테고리의 글 목록 (4 Page) IT Code Storage

/89

2014. 11. 12. 11:27

ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기

이번 포스팅은 ExtJS에서 제공하는 데이터뷰(DATAVIEW)를 이용하여

기본적인 리스트 출력을 해보도록 하겠습니다.

dataview 는 사용자가 정의한 템플릿 레이아웃을 출력하고

그 출력된 데이터를 사용할때 유용한 컴포넌트입니다.

제일먼저 목록출력시 필요한 스타일을 간단하게 꾸며보도록 하겠습니다.

.default { 
  padding: 0 3px 0 3px;
}
     
.item {
    border-width: 1px;
    border-style: solid;
    background-color: blue;
    color: white;
}
     
.over {
    border-width: 2px;
    border-style: dotted;
    background-color: red;
    color: white;
}
 
a.default_a{
    color: white;
}

위처럼 스타일을 정의하셨다면

dataview 컴포넌트 출력을 위하여 ExtJS 코드를 작성해보도록 하겠습니다.

Ext.onReady(function(){
    Ext.create("Ext.panel.Panel",{
        renderTo : Ext.getBody(),
        title : 'DATAVIEW 샘플코드',
        items:[
               {
                   //Ext.view.View
                   xtype : 'dataview',
                   tpl: new Ext.XTemplate(
                           '<tpl for=".">',
                                '<div class="item">',
                                        '<a href="{url}" target="_blank" class="default_a">{title}</a>',
                                '</div>',
                            '</tpl>'),
                   //기본 클래스 적용
                   cls: 'default',
                   //목록 아이템
                   itemSelector: '.item',
                   overItemCls: 'over',
                   trackOver : true,
                   store : Ext.create('Ext.data.Store',{
                                   fields : ['title','url'],
                                   data: [
                                        {title:'네이버',url : 'http://www.naver.com'},
                                        {title:'티스토리',url : 'http://www.tistory.com'},
                                        {title:'다음', url : 'http://www.daum.net'},
                                        {title:'구글', url : 'http://www.google.com'}
                                   ],
                                   proxy: {
                                        type: 'memory'
                                   }
                            })
               }
         ]
    });
})

코드설명 전에 실행먼저 해보도록 하겠습니다 ^^

실행결과는 위와 같습니다.

"직접 레이아웃 스타일 잡고 HTML태그 이용해서 사용해도 되는거 아닌가요?"

라고 의문을 가지시는 분들이 계실텐데요

일반적인 html을 사용하셔도 무관하나 이벤트 및 메소드 등 지원되는 기능들이 많으니

DATAVIEW를 사용하지 않을 이유는 없는거 같습니다.

위 코드에 대해서 필요부분에 대해서 하나씩 설명해보겠습니다.

PANEL 컴포넌트 내부에 xtype이 dataview인 컴포넌트로 목록을 출력 해보았는대요

dataview를 사용하실때는 패키지 개념의 필수로 작성해주어야 하는 속성이 있습니다.

바로 store, tpl, itemSelector 이 3가지는 필수로 선언이 되어야 합니다.

tpl 속성은 "Ext.XTemplate" 클래스를 이용하여 템플릿을 만들어 주기 위해 필요한 속성입니다.

※ 속성에 정의된 코드를 보시면 JSP에서 JSTL을 사용해보셨던 분이시라면 익숙한 구조일거라 생각됩니다.

바로 C태그의 <c:forEach></c:forEach> 태그와 비슷한 개념입니다.

for문에 "."은 root 데이터를 의미하는것이라 대부분 "." 을 사용하면 되는부분이여서 크게신경안쓰셔도 되며

내부 적으로 보시면 {url},{title} 처럼 마치 JSP의 EL 태그와 유사한 치환자를 보실 수 있습니다.

Ext.data.Store 공간내에 담겨있는 데이터를 출력시켜주기위해 데이터스토어의 fields 내에 정의된 값들와 매칭 시켜주면 되겠습니다.

※ JSTL과 같이 IF태그 AND/OR 등도 사용이 가능합니다. 하지만 이번 포스팅에서는 다루지 않도록 하겠습니다.

그리고 필수요소 마지막인 itemSelector라는 속성이 있는데

이 속성은 이벤트나 메서드와 같은 dataview에서 지원해주는 기능들을

적용해주기 위한 셀렉터를 의미하는 겁니다.

그외에 cls는 전체 목록에 default로 적용시킬 클래스명을 명시해주면 되겠으며,

마지막으로 overItemCls속성의 경우는

dataview 아이템에 mouseover 되었을 경우의 적용시키고자 하는 클래스명을

작성주시면 되겠습니다.

overItemCls 속성 적용시 trackOver값을 true로 주면 어떤 역할을 하는거 같은대

확실히 어떤 역할을 하는지는 정확히 모르겠네요;;

저는 단순하게 a 태그에 링크를 걸어서 새창띄워주는 기능을 하였으나

리스너의 아이템클릭등과 같은 이벤트를 이용하여 사용하시면 되겠습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - ExtJS5의 cartesian 타입 차트그래프 종류별로 출력해보기 (0)	2014.11.18
ExtJS 강좌 - Ajax 비동기 통신에 대하여 알아보자 (0)	2014.11.13
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12)	2014.11.08
ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기 (0)	2014.11.08
ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0)	2014.11.07

/82

2014. 11. 8. 16:10

ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기

이전 레이아웃 포스팅을 하면서 탭레이아웃 관련 내용을 다루었던 적이 있습니다.

2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)

위 레이아웃 종류들중에서 탭패널을 동적으로 추가해보고자 합니다.

기존 탭패널 컴포넌트와 추가로 툴바에 버튼 하나를 생성을 해보도록 하겠습니다.

이번포스팅은 간단해서 내용이 짧으며 이해하시기도 쉬우실겁니다 ^^

탭패널컴포넌트 생성코드

Ext.onReady(function(){
    Ext.create("Ext.tab.Panel",{
        renderTo : Ext.getBody(),
        width: 500,
        height: 400,
        items:[
               {
                   title: '1page',
                   html: '1페이지'
               }
         ],
         fbar : [{
             xtype : 'button',
             text : '탭추가',
             handler : function(btn){
                 //code here
             }
         }]
    });
})

실행해보면 다음과 같은 화면으로 컴포넌트 생성이 될겁니다.

위처럼 최초컴포넌트에는 1개의 탭만 존재합니다.

이제부터 툴바에 존재하는 "탭추가"버튼을 클릭하여

동적으로 탭을 생성해보도록 하겠습니다.

상단 코드의 //code here 다음라인에 하단 코드를 추가해주세요

동적탭 추가기능을 위한 스크립트코드

var tab_count = btn.up("tabpanel").items.items.length+1;
var dynamictab = btn.up("tabpanel").add({
       title: tab_count+'page',
       html: tab_count+'페이지',
       closable : true,
})
 btn.up("tabpanel").setActiveTab(dynamictab);

스크립트 코드를 작성하였는데 각각에 대하여 설명을 드리겠습니다.

① tab_count : 셀렉터를 이용하여 탭패널객체를 찾은 후 현재 존재하는 탭패널갯수에 +1을 합니다

탭패널의 타이틀과 html영역부분에 숫자를 적용해보고자 샘플로 제작하였습니다.

② dynamictab : 탭패널객체.add() 함수는 탭내에 패널을 추가한다는 것입니다.

title/html은 아시겠고 closable 속성을 true로 주게 되면 탭에 X 표시가 같이 나오며 클릭시

삭제기능을 제공합니다.

③ setActiveTab() : 마지막으로 추가한 패널에 포커스를 잡아주는 함수입니다.

다시한번 실행해보겠습니다.

위처럼 동적으로 생성되면 탭영역의 X버튼클릭하면 해당 탭이 삭제되는 기능까지 확인 할 수 있습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - Ajax 비동기 통신에 대하여 알아보자 (0)	2014.11.13
ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기 (3)	2014.11.12
ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기 (0)	2014.11.08
ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0)	2014.11.07
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0)	2014.11.05

/81

2014. 11. 8. 09:00

ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기

ExtJS의 추천 기능인 컨텍스트메뉴에 대해서 포스팅 하고자 합니다.

일반적으로 jQueryUI의 경우 menu 기능을 제공하지만

마우스 우클릭 이벤트 후 컨텍스트 메뉴를 출력하는 기능은 제공하지 않습니다.

다만, 다른 개발자들이 jQueryUI를 사용하여 CONTEXTMENU 기능을 구현한 소스는

GITHUB에서 찾아볼 수 있답니다.

반면, ExtJS에서는 기본컴포넌트로 제공을 하니 정말 좋지않나요?? ㅎ

itemcontextmenu라는 이벤트를 지원해주는 컴포넌트에서만 사용이 가능합니다.

자주 사용되는 컴포넌트들 중에 itemcontextmenu 이벤트를 제공해주는 컴포넌트는 다음과 같습니다.

제가 주로사용하는 컴포넌트중 우클릭이벤트를 지원하는 컴포넌트는

dataview, treepanel, gridpanel, tablepanel에서 지원이 되네요.

나머지는 그때그때 document api문서를 확인해봐야 겠습니다.

지난시간에 작업했던 memory 타입의 트리패널노드를 마우스 우클릭하여 컨텍스트메뉴를 띄워보도록 하겠습니다.

2014/11/07 - [웹개발강좌/ExtJS] - ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함)

Ext.onReady(function(){
   Ext.create('Ext.tree.Panel',{
        renderTo : Ext.getBody(),
        store : Ext.create('Ext.data.TreeStore',{
                        root : {
                            text : '1depth',
                            expanded : true,
                            children: [{
                                text:'2depth(1)',
                                expanded: true,
                                children:[{
                                    text:'3depth',
                                    leaf : true
                                }]
                            },{
                                text:'2depth(2)',
                                leaf : true
                            }]
                        },
                        proxy : {
                            type : 'memory'
                        }
               }),
       listeners:{
           itemcontextmenu : function( object, record, item, index, e){
               e.stopEvent();
               var menu = Ext.create('Ext.menu.Menu',{
                               items : [
                                    {
                                        text: '우클릭메뉴1'
                                    },
                                    {
                                        text: '우클릭메뉴2'
                                    }
                                ]
                           });
               menu.showAt(e.getXY());
           }
       }
    })
});

위와 같이 코드를 작성하였습니다.

기존 트리패널 코드에서 추가로 된 부분은 리스너에 이벤트 부분만 추가를 했습니다.

리스너 관련 및 설명에 대해서는 이전 도큐먼스 보는 방법에 대한 포스팅을 참고해주세요

2014/10/28 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS 사이트에서 제공하는 API DOCUMENT문서 사용하는 방법

itemcontextmenu라는 이벤트 자체가 마우스 우클릭이벤트 발생시 동작되는 이벤트입니다.

코드를 하나씩 본다면

① e.stopEvent() : 마우스 우클릭에 대한 이벤트를 중지합니다.

② var menu : 메뉴컴포넌트를 생성하여 menu변수에 담습니다.

③ menu.showAt() : 메뉴컴포넌트를 보여줄 위치를 결정하는 함수입니다.

④ e.getXY() : 마우스 우클릭 이벤트가 발생된 X/Y 좌표위치를 의미합니다.

실행을 한번 해보도록 합니다.

성공적으로 컨텍스트메뉴가 생성됩니다.

그런데 메뉴좌측공간이 너무 많이 띄워져 있습니다.

아이콘이 출력되는 공간인대 정의를 해주지않아서 공백으로 표시 된 것입니다.

별도로 style을 재정의해주어서 공간을 줄여주도록 하겠습니다.

.x-menu-item-text-default.x-menu-item-indent-no-separator { 
    margin-left : 10px;
 }

위와 같이 스타일을 정의해주신 다음 재실행을 해보도록 합니다.

스타일이 적용되어서 좌측공백을 줄어든것을 확인 할 수 있었습니다.

by 개발로짜

저작자표시 비영리 변경금지

'웹개발강좌 > ExtJS' 카테고리의 다른 글

ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기 (3)	2014.11.12
ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기 (12)	2014.11.08
ExtJS 트리패널을 사용하여 컴포넌트 출력해보기 (memory/ajax 방식 포함) (0)	2014.11.07
ExtJS의 그리드패널 reconfigure함수를 적용하여 컬럼 및 데이터 재설정하기 (0)	2014.11.05
ExtJS 강좌 - 그리드패널에 페이징툴바를 적용하여 페이징 목록 출력하기 (10)	2014.11.03

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

ExtJS 강좌 - DATAVIEW를 이용하여 데이터 목록 출력해보기

ExtJS 강좌 - 클릭이벤트를 적용하여 탭컴포넌트 동적으로 추가하기

ExtJS 강좌 - 마우스우클릭으로 contextmenu(컨텍스트메뉴) 띄워보기

'웹개발강좌 > ExtJS' 카테고리의 다른 글

탭패널컴포넌트 생성코드

동적탭 추가기능을 위한 스크립트코드

'웹개발강좌 > ExtJS' 카테고리의 다른 글

'웹개발강좌 > ExtJS' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역