[Sencha&ExtJS] ExtJS 기초.10 - 데이터뷰(Dataview)로 사용자 정의 템플릿 제작

dataview

레이아웃 구성을 사용하기 위해  Bootstrap(부트스트랩)을 함께 사용해 봅니다.

기존의 ExtJS CSS 부분의 다음의 Bootstrap CDN링크를 넣어준다.

부트스트랩 CDN

<!-- 합쳐지고 최소화된 최신 CSS -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

패널 안에 xtype:dataview 코드 작성

tpl config 은 html config와 다른 속성입니다. (java의 JSTL와 흡사, 내부에 반복/조건문 사용 가능)

Ext.onReady(function(){

    Ext.create(

        'Ext.Panel',

        {

            title: 'Dataview List',

            items: [{

                xtype: 'dataview',

                tpl: new Ext.XTemplate(

                    '<ul class="list-group">',

                    '    <li class="list-group-item"> 목록 1</li>',

                    '    <li class="list-group-item">리스트 2</li>',

                    '    <li class="list-group-item">리스트 3</li>',

                    '</ul>'

                )

            }],

            renderTo: Ext.getBody()

        }

    )

})

목록 예제

DataView정의시, 필수 config 속성값

itemSelector - 목록 item의 공통 Class명 혹은 Element

tpl - Ext.XTemplate을 이용한 템플릿

xtype: 'dataview' 코드: 

반복되는 '<li>'태구를 하나로 줄이고, <tpl for=".">을 이용하여 for문 사용. 

JAVA의 JSTL의 "${value}"처럼 tpl에서는 "{value}을 사용. 중괄호 안에는 store field값을 사용.

Ext.onReady(function(){

    Ext.create(

        'Ext.Panel',

        {

            title: 'Dataview List',

            items: [

                {

                    xtype: 'dataview',

                    itemSelector: '.list-group-item',

                    tpl: new Ext.XTemplate(

                        '<ul class="list-group">',

                        '   <tpl for=".">',

                        '    <li class="list-group-item">{value}</li>',

                        '   </tpl>',

                        '</ul>'

                    ),

                    store : Ext.create(

                        'Ext.data.Store',

                        {

                            fields: ['value'],

                            //data: [ {value:'목록 1'},{value:'목록  2'},{value:'목록  3'} ] //JSON 방식

                            data: [ ['목록 1'],['목록  2'],['목록  3'] ] //Array방식

                        }

                    )

                }

            ],

            renderTo: Ext.getBody()

        }

    )

})

목록 리스트

두개 이상의 tpl  & 마우스 오버(overItemCls: 'active')추가하기

Ext.onReady(function(){

    Ext.create(

        'Ext.Panel',

        {

            title: 'Dataview List',

            items: [

                {

                    xtype: 'dataview',

                    itemSelector: '.list-group-item',

                    // Add hover action config

                    overItemCls: 'active',

                    tpl: new Ext.XTemplate(

                        '<div class="list-group">',

                        '   <tpl for=".">',

                        '   <a href="#" class="list-group-item">',

                        '   <h4 class="list-group-item-heading">{title}</h4>',

                        '   <p class="list-group-item-text">{content}</p>',

                        '   </a>',

                        '   </tpl>',

                        '</div>'

                    ),

                    store : Ext.create(

                        'Ext.data.Store',

                        {

                            fields: ['title','content'],

                            data: [ {title:'첫 제목',content:"첫번째 세션"},{title:'두번재 제목',content:"두번째 세션"} ]

                        }

                    )

                }

            ],

            renderTo: Ext.getBody()

        }

    )

    

})

mouse over 처리 화면 (overItemCls: 'active')

hover효과가 css 클래스에 정의 되어 있어야 한다. Bootstrap에서 목록상 리스트별 코커스를 주기 위해서 제작된 class는 "active"입니다.