Benney Blog

이번 시간에는 게시판 애플리케이션의 UI를 구성하고 데이터를 채울 준비를 해본다. 간략히 게시판 애플리케이션에 대해 설명하면, 좌우로 나눠진 게시판 애플리케이션에서 좌측에 게시판 리스트를 그리드로 구성하고 해당 그리드에서 게시물을 클릭하면 우측 패널에 해당 글의 내용이 보여지는 구조다.

---------------------------------------

연재순서

1회 | 2013. 9 | ExtJS4 클래스 시스템의 이해

2회 | 2013. 10 | ExtJS4 MVC 아키텍처의 이해

3회 | 2013. 11 | 시스템 뼈대 구현하기

4회 | 2013. 12 | ExtJS4 실전코딩 : 멀티 게시판 애플리케이션 구현 (1)

5회 | 2014. 1 | ExtJS4 실전코딩 : 멀티 게시판 애플리케이션 구현 (2)

이전시간에 우리는 애플리케이션의 뼈대를 구성하고 UI를 가지고 있는 클래스라면 어떤 형태로도 보여지는 구조를 구현해 보았다. 이런 구조의 뼈대는 게시판과 같이 동일한 구조를 반복적으로 표현하는 애플리케이션뿐만 아니라 전혀 다른 여러가지 형태의 애플리케이션 클래스를 실행할 수 있는 좋은 구조다.

이제 게시판 애플리케이션의 UI를 구성해 보자. <표 1>은 게시판을 구성할 클래스들에 대한 설명이다.

<표 1> 클래스 정의

UI 클래스를 구현하기 앞서 <리스트 1>과 같이 실행할 프로그램의 클래스명을 수정하도록 하자. 게시판 애플리케이션의 메인 클래스는 MyMvc.view.board.BoardMain이다. 최초 애플리케이션이 실행되면 첫번째 데이터가 선택되고 BoardMain 클래스가 실행되도록 한다는 내용이다.

<리스트 1> /json/programlist.json

{"entitys": [
    {
        "pgm_syscd": "F001",
        "pgm_class": "MyMvc.view.board.BoardMain",
        "pgm_icon": "grid",
        "pgm_nm": "ExtJS",
        "brd_number": "001"
    },
    {
        "pgm_syscd": "F001",
        "pgm_class": "MyMvc.view.board.BoardMain",
        "pgm_icon": "grid",
        "pgm_nm": "Sencha Touch",
        "brd_number": "002"
    },
    {
        "pgm_syscd": "F002",
        "pgm_class": "MyMvc.view.board.BoardMain",
        "pgm_icon": "grid",
        "pgm_nm": "구인_구직",
        "brd_number": "003"
    }
],
    "errMsg": "", "errTitle": "검색결과", "message": "", "success": true, "totalCount": "2"}

app/view 폴더 아래에 board 폴더를 생성하고 <리스트 2>와 같이 BoardMain.js 클래스를 구현하자. 이 클래스는 board 레이아웃을 사용해 좌측에 그리드와 우측에 패널을 가지고 있고, 게시판 아이디로 사용할 brd_number를 config 정보로 가지고 있다.

<리스트 2> BoardMain 클래스

Ext.define('MyMvc.view.board.BoardMain', {
    extend: 'Ext.container.Container',
    alias: 'widget.boardmain',
    layout : 'border',

    config: {
      brd_number : ''
    },
    initComponent: function () {
        var me = this;
        me.initConfig();

        Ext.apply(me, {
            items: [
                {
                    region: 'center',
                    xtype: 'boardlist',
                    brd_category_cd : me.getBrd_number()
                },
                {
                    xtype: 'boardview',
                    title: '게시물',
                    width : 500,
                    region: 'east',
                    collapsible: true,
                    collapsed : true,
                    split: true
                }
            ]
        });
        me.callParent(arguments);
    }
});

좌측 그리드 클래스를 작성하자. 클래스명은 BoardList이고 Grid 클래스를 상속받으며 boarlist이라는 위젯명을 사용한다. <리스트 3>에서 스토어는 Ext.create를 사용해 매번 생성하도록 했다. 컨트롤러에 스토어를 등록하고 store: 'Board'로 사용할 수도 있겠으나, 이렇게 할 경우 모든 게시판이 하나의 스토어를 공유해 사용하게 되므로 각 게시판별 게시물을 읽어오기 어려워진다.

<리스트 3> BoardList 클래스 코드

Ext.define('MyMvc.view.board.BoardList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.boardlist',
    columnLines: true,
    initComponent: function () {
        var me = this;
        this.store = Ext.create('MyMvc.store.Boards');
        Ext.apply(this, {
            tbar: [
                {
                    xtype: 'button',
                    text: '글쓰기 ',
                    action: 'board.create'
                }
            ],
            columns: [
                {
                    text: '게시글번호 ',
                    width: 80,
                    dataIndex: 'brd_seq',
                    field: {
                        allowBlank: false
                    }
                },
                {
                    text: '제목 ',
                    flex: 1,
                    dataIndex: 'brd_title',
                    field: {
                        allowBlank: false
                    }
                },
                {
                    text: '입력자 ',
                    width: 70,
                    dataIndex: 'brd_input_user_nm',
                    field: {
                        allowBlank: false
                    }
                },
                {
                    text: 'Input Date ',
                    width: 150,
                    align: 'center',
                    dataIndex: 'brd_input_date',
                    field: {
                        allowBlank: false
                    }
                },
                {
                    text: 'Read Cnt ',
                    width: 70,
                    dataIndex: 'brd_read_cnt',
                    field: {
                        allowBlank: false
                    }
                }
            ],
            dockedItems: [
                {
                    xtype: 'pagingtoolbar',
                    store: this.store,
                    dock: 'bottom',
                    displayInfo: true
                }
            ]
        });

        me.callParent(arguments);
    }
});

우측 패널 클래스를 작성한다. 우측 패널 클래스는 내부에 게시물 내용을 확인하는 폼 패널과 함께 조작을 위한 버튼을 가지고 있다.

<리스트 4> BoardView 클래스 코드

Ext.define('MyMvc.view.board.BoardView', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.boardview',
    bodyPadding: 5,
    autoScroll: true,
    collapsed: true,

    initComponent: function () {
        var me = this;
        Ext.apply(this, {
            items: [
                {
                    xtype: 'form',
                    bodyPadding: 10,
                    itemId: 'board.form',
                    layout: 'anchor',
                    defaults: {
                        anchor: '100%'
                    },
                    buttons: [
                        {
                            xtype: 'statusbar',
                            defaultText: ' ',
                            flex: 1
                        },
                        {
                            action: 'board.save',
                            text: 'Save',
                            scope: me,
                            handler: function () {
                                this.onSave();
                            }
                        },
                        {
                            action: 'board.remove',
                            text: 'Del ',
                            listeners: {
                            }
                        } ,
                        {
                            action: 'board.close',
                            text: 'Close ',
                            listeners: {
                            }
                        }
                    ],

                    items: [
                        {    xtype: 'hiddenfield', name: 'brd_seq'    },
                        {    xtype: 'hiddenfield', name: 'brd_category_cd'    },
                        {
                            xtype: 'textfield',
                            name: 'brd_title',
                            allowBlank: false,
                            fieldLabel: '제 목',
                            emptyText: 'Title'
                        },
                        {
                            xtype: 'textareafield',
                            grow: true,
                            growMin: 150,
                            growMax: 300,
                            allowBlank: false,
                            name: 'brd_content',
                            fieldLabel: '내 용 '
                        },
                        {
                            xtype: 'textfield',
                            name: 'brd_input_user_nm',
                            allowBlank: false,
                            fieldLabel: '등 록 자'
                        },
                        {
                            xtype: 'displayfield',
                            fieldLabel: '입 력 일',
                            name: 'brd_input_date'
                        },
                        {
                            xtype: 'displayfield',
                            fieldLabel: '수 정 일',
                            name: 'brd_update_date'
                        }
                    ]
                }
            ]
        });
        this.callParent(arguments);
    }
});

좌측 그리드에서 사용할 Store 클래스를 작성하자. Store 클래스는 CRUD가 모두 가능하도록 플록시를 설정하자. actionMethod의 경우 서버쪽 코드에 따라 변경될 수 있으므로 필요 시 수정하도록 한다.

<리스트 5> Boards Store 클래스 코드

Ext.define('MyMvc.store.Boards', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    model: 'MyMvc.model.Board',
    proxy: {
        type: 'ajax',
        actionMethods: {
            read: 'GET',
            create: 'POST',
            update: 'PUT',
            destroy: 'DELETE'
        },
        api: {
            read: '/board.do?boards',
            create: '/board.do?create',
            update: '/board.do?update',
            destroy: '/board.do?remove'
        },
        reader: {
            type: 'json',
            root: 'entitys',
            totalProperty: 'totalCount',
            messageProperty: 'message'
        },
        listeners: {
            exception: function (proxy, response, operation) {

            }
        }
    }
});

<리스트 5>의 Store 클래스에서 사용하는 모델 클래스를 작성하자. 이 클래스 또한 자체적으로 CRUD가 모두 가능하도록 <리스트 5>의 플록시 설정을 그대로 사용하도록 하자. 일반적으로 스토어에 설정된 플록시 정보는 게시물의 리스트를 저장하는 용도로 사용하고, 모델에 설정된 플록시 정보는 폼 정보와 연관지어 입력, 수정, 삭제 등을 수행하는 데 사용한다.

<리스트 6> Board 모델 클래스 코드

Ext.define('MyMvc.model.Board', {
    extend: 'Ext.data.Model',
    idProperty: 'brd_seq',
    fields: [
        {name: 'brd_seq', type: 'int'},
        'brd_title',
        'brd_content',
        'brd_category_cd',
        'brd_input_user_nm',
        'brd_input_date',
        {name: 'brd_read_cnt', type: 'int'},
        'brd_update_date'
    ],
    proxy: {
        type: 'ajax',
        actionMethods: {
            read: 'GET',
            create: 'POST',
            update: 'PUT',
            destroy: 'DELETE'
        },
        api: {
            read: '/board.do?boards',
            create: '/board.do?create',
            update: '/board.do?update',
            destroy: '/board.do?remove'
        },
        reader: {
            type: 'json',
            root: 'entitys'
        }
    }
});

게시판 클래스들이 모두 동적으로 로딩될 수 있도록 컨트롤러 클래스를 만들고 앞서 작성한 모든 클래스를 등록하자. 이를 구체적으로 구현하는 방법에 대해서는 다음 시간에 설명하기로 한다.

<리스트 7> Board 컨트롤러 클래스 코드

Ext.define('MyMvc.controller.Board', {
    extend : 'Ext.app.Controller',

    views : [ 'board.BoardMain', 'board.BoardList', 'board.BoardView' ],
    models: ['Board'],
    stores : ['Boards'],

    init : function(app) {
        this.control({
        });
    }
});

이제 Board 컨트롤러 클래스를 application.js 클래스에 등록해 전체 애플리케이션이 Board컨트롤러 클래스를 인식하도록 변경해준다.

<리스트 8> application.js 내부 컨트롤러 추가

Ext.define('MyMvc.Application', {
	name : 'MyMvc',

	extend : 'Ext.app.Application',

	views : [
	// TODO: add views here
	],

	controllers : [ 'Frame' , 'Board'],

	stores : [
	// TODO: add stores here
	]
});

애플리케이션을 재실행하면 <그림 1>과 같이 게시판 리스트와 게시물 보기 화면을 확인할 수 있다.

<그림 1> 게시판 애플리케이션 UI 구성

좌측 메뉴에서 선택된 게시판은 BoardMain 클래스에 의해 우측 중앙 영역에 보여지게 된다. 표면적으로는 각 메뉴에서 선택된 게시판은 동일하나 각각의 게시판 구분은 /json/programlist.json의 brd_number에 의해 달라지게 된다.

이는 <리스트 9>와 같이 BoardMain 클래스를 수정하면, 좌측 게시판 리스트를 클릭할 때 마다 게시판 아이디가 다르다는 것을 확인할 수 있다. 이 게시판 아이디에 의해 데이터베이스의 게시물을 가져오거나 입력할 수 있다.

<리스트 9> BoardMain 클래스 수정

Ext.define('MyMvc.view.board.BoardMain', {
    extend: 'Ext.container.Container',
    alias: 'widget.boardmain',
    layout : 'border',

    config: {
      brd_number : ''
    },
    initComponent: function () {
        var me = this;
        me.initConfig();

        .. 중략 ..
        me.callParent(arguments);
        me.on('render', function(){
           console.log("현재 게시판의 게시판 아이디는 " + me.getBrd_number());
        });
    }
})

<그림 2> 게시판 아이디 확인 결과

정리하며

이번 시간에는 게시판 애플리케이션의 UI를 구현해 봤다. 동일한 게시판 프로그램을 개발하고 해당 프로그램이 각기 다른 데이터를 표현하도록 하는 것이 핵심이다. 다음 시간에는 게시판의 CRUD 기능을 구현해보겠다. 지면 관계상 생략된 내용은 필자의 블로그를 통해 확인하자.

시스템 뼈대 구현하기

이번 강좌부터 3회에 걸쳐 ExtJS MVC를 통해 게시판을 구현해보기로 하자. 금번 강좌에서는 게시판이 들어갈 애플리케이션의 뼈대를 만들고 이를 통해 MVC를 적용하는 방법을 같이 배우게 된다. 굳이 게시판을 만드는 이유는 웹애플리케이션에서 게시판이 가지고 있는 의미가 CRUD성격을 모두 지니고 있고 모든 웹개발자들이 만들어봐야 하는 기본 애플리케이션으로 주제에 대한 공통적인 이슈가 모두 공유되어 있다고 믿기 때문이다.

이전 시간에 우리는 Sencha CMD를 통해 애플리케이션을 생성하고 빌드하는 방법을 배웠다. 또한 내장된 웹서버를 이용 개발된 애플리케이션을 실행해보았다. 우리가 만들 게시판은 서버코드가 필요하고 데이터베이스가 필요하므로 개발툴을 에디터에서 이클립스로 바꿀 필요가 있다. 이번 강좌에서는 이전시간에 만들었던 MyMvc애플리케이션을 이클립스의 Dynamic Web Project와 함께 묶어 차후에 있을 서버코드 구현에 대비하도록 하자.

우선 그림1과 같이 이클립스 Dynamic Web Project를 생성하고 프로젝트 설정에서 Text file encoding을 EUC_KR에서 UTF-8로 변경하자.

<그림1> 이클립스 프로젝트 설정

필자는 MasoExtJSLecture라는 이름의 프로젝트를 생성하였다. 이제 Sencha CMD를 통해 Extjs 애플리케이션을 생성하자. 이클립스 프로젝트와 맞추려면 WebContent폴더에 ExtJS애플리케이션을 생성하도록 하자. 애플리케이션 생성 코드는 아래와 같다.

sencha -sdk C:\Sencha\ext-4.2.1.883 generate app MyMvc C:\이클립스프로젝트\WebContent

정상적으로 애플리케이션이 생성되면 이클립스에서 해당 프로젝트를 refresh하고 이클립스 톰캣플러그인으로 웹서버를 실행한다. 브라우저를 통해 실행하면 이전 강의에서 보았듯이 기본 어플리케이션이 그림2와 같이 실행되는 것을 볼 수 있다.

<그림2> Sencha CMD를 통해 생성된 기본 애플리케이션

게시판 애플리케이션은 <그림3>과 같이 상단영역과 좌측 메뉴영역 우측 중앙의 애플리케이션영역으로 나누어 진다.

<그림3> 애플리케이션인 MockUp

표1은 뼈대를 이룰 클래스들에 대한 설명이다.

<표1> 클래스 정의

MyMvc.view.Viewport.js를 구현하자. Viewport에서는 애플리케이션의 기본 구조를 구성한다.

<리스트1> MyMvc.view.Viewport.js

Ext.define('MyMvc.view.Viewport', {

extend : 'Ext.container.Viewport',

requires : [],

layout : 'border',

items : [ {

    region : 'north',

    xtype : 'container',

    html : '상단영역',

    height : 100,

    style : {

     borderColor : '#000000',

     borderStyle : 'solid',

     borderWidth : '1px'

    }

}, {

    region : 'center',

    xtype : 'tabpanel',

    title : '게시판 프로그램 영역',

    style : {

        borderColor : '#000000',

        borderStyle : 'solid',

        borderWidth : '1px'

    }

}, {

    region : 'west',

    xtype : 'container',

    html : '메뉴 영역',

    width : 200,

    style : {

        borderColor : '#000000',

        borderStyle : 'solid',

        borderWidth : '1px'

    }

} ]

});

브라우저를 통해 실행하면 좌측, 상단, 우측으로 영역이 나눠지는 것을 확인 할 것이다.

이제 상단 영역을 구현하자. 상단영역에 해당되는 클래스를 <리스트2>와 같이 코딩하고

Viewport.js의 상단영역을 <리스트2>의 Header클래스로 대체하자.

<리스트2> 상단 Header 클래스 및 Viewport클래스 수정

Ext.define('MyMvc.view.Header', {

extend: 'Ext.container.Container',

alias: 'widget.mymvcheader',

id: 'app-header',

height: 52,

layout: {

type: 'hbox',

align: 'middle'

},

initComponent: function() {

this.items = [{

xtype: 'component',

id: 'app-header-title',

html: 'ExtJS MVC를 활용한 게시판 구현하기',

flex: 1

}];

this.callParent();

}

});

// Viewport클래스 기존 상단영역 수정

Ext.define('MyMvc.view.Viewport', {

    extend : 'Ext.container.Viewport',

    requires : [ 'Ext.layout.container.Border', 'MyMvc.view.Header',

            'Ext.tab.Panel' ],

    layout : 'border',

    items : [ {

        region : 'north',

        xtype : 'mymvcheader' // 기존 container

상단영역에서 필요한 css를 index.html에 추가하자.

<리스트3> 상단영역에서 사용할 index.html 내부 css

<link rel="stylesheet" href="bootstrap.css">

<style type="text/css">

#app-header {

background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #8fc33a), color-stop(100%, #739b2e));

background-image: -webkit-linear-gradient(top, #8fc33a, #739b2e);

background-image: -moz-linear-gradient(top, #8fc33a, #739b2e);             background-image: -o-linear-gradient(top, #8fc33a, #739b2e);

background-image: linear-gradient(top, #8fc33a, #739b2e);

border-bottom: 1px solid #567422;

}

#app-header-title {

padding: 15px 10px 10px 31px;

color: white;

font-size: 18px;

font-weight: bold;

text-shadow: 0 1px 0 #4e691f;

}

</style>

<script src="ext/ext-dev.js"></script>

실행하면 <그림4>와 같은 결과를 확인할 수 있다.

<그림4> 상단영역을 구현한 결과

좌측 메뉴영역을 구현하자. 좌측 메뉴는 2depth로 이루어진다. 게시판그룹을 accordion레이아웃으로 노출하고 클릭 시 세부게시판 리스트를 출력하도록 한다.

게시판그룹을 나타낼 WestMenuPanel클래스를 <리스트4>와 같이 정의하자.

<리스트4> 게시판 그룹 클래스

Ext.define('MyMvc.view.WestMenuPanel',{

extend : 'Ext.panel.Panel',

alias : 'widget.westmenupanel',

layout:'accordion',    // ① 레이아웃 설정

collapsible: true,

split:true,

title : 'Forum List',

initComponent: function() {

var me = this;

this.callParent(arguments);

this.on('render', this.setSubMenu, this); // ② render이벤트 발생시 함수 호출

},

// ③ 스토어 호출 후 게시판 그룹을 추가.

setSubMenu: function(){

    var me = this;

    var store = Ext.create('MyMvc.store.Systems');

    store.load(function(record, b, c){                

     store.each(function(rec){

        me.add({

          xtype:'panel',

          title:rec.get('pgm_sysnm'),

          pgm_syscd:rec.get('pgm_syscd'),

          iconCls:rec.get('pgm_sysicon')

         });

     });

    });

}

});

주요코드를 설명하자. ①은 게시판그룹을 추가할 때 accordion형태로 추가되도록 레이아웃을 설정한다. ②는 현 클래스에서 render이벤트가 발생시 게시판그룹을 추가할 메소드를 호출한다. ③함수는 게시판그룹 store를 호출하고 자식으로 추가한다.

게시판 그룹에 사용할 Model과 Store를 정의하자.

<리스트5> MyMvc.model.Program.js

Ext.define('MyMvc.model.Program', {

extend : 'Ext.data.Model',

fields : [ 'pgm_id', 'pgm_nm', 'pgm_syscd', 'pgm_sysnm', 'pgm_class',

    'pgm_icon', 'pgm_sysicon', 'group_id', 'group_nm',

    'group_status_cd', 'group_status_nm', 'group_pgm_status_nm',

    'title', 'brd_number']

});

<리스트6> MyMvc.store.Systems.js

Ext.define('MyMvc.store.Systems', {

extend: 'Ext.data.Store',    // 당연히 store상속

autoLoad : false,        // 자동 로드는 꺼놓자.

model: 'MyMvc.model.Program',    // 모델 세팅

proxy: {

type: 'ajax',

// json폴더를 루트에 만들고 systemlist.json이라는 파일를 통해

// 시스템 리스트를 받을 수 있다.

url: '/json/systemlist.json',    

reader: {

    type: 'json',

    root: 'entitys',

    totalProperty: 'totalCount',

    messageProperty: 'message'

},

listeners: {

exception: function(proxy, response, operation){}

    }

}

});

<리스트7>/json/systemlist.json

{

    "entitys":[{

        "pgm_syscd":"F001",

        "pgm_sysicon":"grid",

        "pgm_sysnm":"Sencha",

        "title":"Sencha"

    }, {

        "pgm_syscd":"F002",

        "pgm_sysicon":"grid",

        "pgm_sysnm":"사는애기 ",

        "title":"사는애기"

    }, {

        "pgm_syscd":"F003",

        "pgm_sysicon":"grid",

        "pgm_sysnm":"Front End",

        "title":"Front End"

    }],

    "errMsg":"",

    "errTitle":"검색결과",

    "message":"",

    "success":true,

    "totalCount":""

}

Viewport.js를 수정하여 <리스트5~7> 코드가 적용되도록 하자.

<리스트8>Viewport.js수정

…중략..

requires : [ 'Ext.layout.container.Border', 'MyMvc.view.Header',

            'Ext.tab.Panel', 'MyMvc.view.WestMenuPanel' ],

..중략..

}, {

    region : 'west',

    xtype : 'westmenupanel',

    width : 200

} ]

결과를 실행하면 <그림5>와 같이 게시판그룹이 출력된다.

<그림5> 좌측 게시판 그룹 구현

<그림5>는 accordion레이아웃을 이용하여 panel에 panel을 배치한 것이다. 이제 각 게시판그룹 이하에 중앙패널에 표시할 게시판리스트가 나오도록 구현해 보자.

<리스트9> Controller를 Application클래스에 등록

Ext.define('MyMvc.Application', {

    ..중략..

    controllers : [ 'Frame' ],

    ..중략..

});

<리스트10> MyMvc.controller.Frame.js 생성

Ext.define('MyMvc.controller.Frame', {

extend: 'Ext.app.Controller',

views: ['MyMvc.view.WestMenuDataViewPanel'],

stores : ['Programs'],

init : function(app) {

    this.control({

    });

}

});

<리스트11> MyMvc.store.Programs.js 생성

Ext.define('MyMvc.store.Programs', {

extend : 'Ext.data.Store',

autoLoad : true,

model : 'MyMvc.model.Program',

proxy : {

    type : 'ajax',

    url : '/json/programlist.json',

    reader : {

     type : 'json',

     root : 'entitys',

     totalProperty : 'totalCount',

     messageProperty : 'message'

    },

    listeners : {

     exception : function(proxy, response, operation) {

     }

    }

},

filterUsersByDepartment : function(pgm_syscd) {

    this.clearFilter();

    this.filter([ {

        property : 'pgm_syscd',

        value : pgm_syscd

    } ]);

},

refresh : function() {

    this.clearFilter();

}

});

<리스트12> /json/programlist.json

{"entitys":[

{    "pgm_syscd":"F001","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"ExtJS","brd_number":"001" },

{    "pgm_syscd":"F001","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"Sencha Touch","brd_number":"002" },

{    "pgm_syscd":"F002","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"구인_구직","brd_number":"003" },

{    "pgm_syscd":"F002","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"요즘","brd_number":"004" },

{    "pgm_syscd":"F003","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"jQuery","brd_number":"005" },

{    "pgm_syscd":"F003","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"Javascript","brd_number":"006" }

],

"errMsg":"","errTitle":"검색결과","message":"","success":true,"totalCount":"2"}

<리스트13> MyMvc.view.WestMenuDataViewPanel.js

Ext.define('MyMvc.view.WestMenuDataViewPanel', {

extend : 'Ext.panel.Panel',

alias : 'widget.menuboard',

animCollapse : true,

collapsible : true,

collapsed : true,

useArrows : true,

rootVisible : false,

multiSelect : false,

header : {

    toolFirst : true

},

initComponent : function() {

    var me = this;

    this.initConfig(); // 초기화 실행

    Ext.apply(this, {

     items: [{

        xtype: 'dataview',

        store : 'Programs',

        trackOver: true,

        cls: 'feed-list',

        itemSelector: '.feed-list-item',

        overItemCls: 'feed-list-item-hover',

        tpl: '<tpl for="."><div class="feed-list-item {pgm_icon}">{pgm_nm}</div></tpl><p>'

     }]

    });

    this.callParent(arguments);

}

});

<리스트13>이 호출 될 수 있도록 게시판그룹을 표현한 WestMenuPanel의 setSubMenu 메소드를 아래와 같이 수정하자.

변경전 : xtype: 'panel' -> 변경후 xtype : 'menuboard'

실행 결과를 확인하면 <그림6>와 같이 좌측 게시판 그룹에 게시판 리스트가 추가된 것을 볼 수 있다.

<그림6> 좌측 메뉴에 게시판 리스트 추가.

각각의 게시판그룹을 클릭해보자. 우리가 구현하고자 하는 것은 게시판 그룹을 클릭 후 해당 게시판 그룹코드(pgm_syscd)와 동일한 코드를 가지고 있는 게시판만 출력되도록 하는 것이다. 현재는 모든 게시판이 보여지고 있으므로 해당그룹에 맞는 게시판을 필터링 하도록 구현해보자.

<리스트14>와 같이 Frame Controller를 수정하여 게시판그룹 패널과 내부 게시판리스트 패널의 이벤트를 리스닝 할 수 있도록 하자.

<리스트14> Frame Controller수정

Ext.define('MyMvc.controller.Frame', {

extend : 'Ext.app.Controller',

views : [ 'MyMvc.view.WestMenuDataViewPanel', 'MyMvc.view.WestMenuPanel' ],

stores : [ 'Programs' ],

init : function(app) {

    this.control({

     'westmenupanel > menuboard' : {    // ① 이벤트 리스닝

        afterrender : function(panel){    // ② 최초 발생

         panel.firstSelectDataView();

        },

        expand : function(panel){

         panel.onItemClicked();    // ③ 패널이 열릴때 발생

        }

     }

    });

}

});

<리스트14>를 자세히 설명하자. ①은 Controller의 주요 역할인 View의 이벤트를 리스닝하고 있다. westmenupanel(게시판그룹패널) 하위에 존재하는 menuboard(게시판리스트패널)에서 발생하는 이벤트를 리스닝한다.(westmenupane과 menuboard는 위젯명임을 명심하자.)

②는 render가 끝난 후 호출된다. 인자로 menuboard패널이 넘어온다. afterrender이벤트가 발생하면 firstSelectDataView()함수를 호출한다. ③은 패널이 expand(열릴 때) 될 때 onItemClicked()함수를 호출한다.

②, ③에 해당되는 WestMenuDataViewPanel클래스의 메소드를 <리스트15>와 같이 구현하자.

<리스트15> WestMenuDataViewPanel의 로직구현

Ext.define('MyMvc.view.WestMenuDataViewPanel', {

.. 중략 ..

// dataview상에 출력된 리스트 중에 맨처음 프로그램이

//          선택되어지도록 한다.

firstSelectDataView : function() {

    var me = this;

    if (me.collapsed)

     return;

    var store = this.onItemClicked();

    if (store) {

     var task = new Ext.util.DelayedTask(function() {

        me.down('dataview').getSelectionModel().select(store.getAt(0));

     });

     task.delay(1000);

    }

},

// 시스템 패널을 클릭 할 때 마다 expand이벤트가 호출 된다.

// 이 때 클릭되어 expand된 패널 위에 하위 프로그램을 출력하면 된다.

onItemClicked : function() {

    var me = this;

    if (me.collapsed)

     return // 패널이 접히지 않은 패널을 찾는다.

    me.down('dataview').store

    .filterUsersByDepartment(this.pgm_syscd);

    return me.down('dataview').store;

}

});

수정된 코드를 실행하고 게시판 그룹을 클릭하면 해당 그룹에 맞는 게시판 리스트가 필터링 되어 보여지는 것을 볼 수 있다. 이는 WestMenuDataViewPanel에 구현된 두 개의 메소드에 의해 작동된다.

firstSelectDataView() 메소드는 게시판리스트를 담고 있는 store의 첫번째 데이터가 select되어지도록 하는 코드이다. onItemClicked() 메소드는 게시판 리스트를 출력하는 dataview가 가지는 store를 통해 해당 게시판 그룹에 맞는 게시판을 필터링 하는 역할을 한다.

메뉴에 들어갈 css를 index.html에 <리스트16>과 같이 추가하고 실행하자.

<리스트16> 좌측 메뉴용 css

.feed-list {

padding: 0 3px 0 3px;

}

.feed-list-item {

margin-top: 3px;

font-size: 11px;

line-height: 20px;

cursor: pointer;

border: 1px solid #fff;

}

.feed-list .x-item-selected {

font-weight: bold;

color: #15428B;

background-color: #DFE8F6;

border: 1px dotted #A3BAE9;

}

<그림7은> 게시판 그룹별 게시판리스트를 필터링하여 보여주고 있다.

<그림7> 게시판 그룹별 필터링 적용 후

이번 강좌의 마지막 작업이자 가장 핵심적인 작업이 남아있다. 좌측 메뉴를 구현했고 최초 로딩 시 첫번째 게시판 그룹의 첫번째 게시판이 자동으로 선택되어지게 하였다. 이때 선택되어진 또는 사용자가 선택할 경우 우측에 해당 게시판 애플리케이션을 출력되도록 해야 한다.

<리스트17>과 같이 Frame Controller에 코드를 추가하자.

Ext.define('MyMvc.controller.Frame', {

..중략..

Init : function(app){

this.control({

.. 중략 ..

     'menuboard > dataview' : { // 게시판 리스트의 dataview에서 발생한 이벤트

     select : this.onProgramSelect

     }

});

},

onProgramSelect : function(dataview, record) {

    var pgm_class = record.get('pgm_class'), pgm_nm = record.get('pgm_nm');

    var centerpanel = Ext.ComponentQuery

                .query('viewport container[region="center"]')[0];

    var tab = centerpanel.down('[tabuniqid=' + pgm_class + pgm_nm + ']');

    if (!tab) {

     tab = Ext.create(pgm_class, {

        brd_number : record.get('brd_number')

     });

     tab.title = pgm_nm+ "("+record.get('brd_number')+")";

     tab.tabuniqid = pgm_class + pgm_nm;

     centerpanel.add(tab);

    }

    centerpanel.setActiveTab(tab);

}

});

<리스트17>에 대해 자세히 설명하겠다. Frame Controller에 새로운 이벤트를 리스닝하도록 코드를 추가하였다. 이 코드는 게시판리스트 패널(WestMenuDataViewPanel) 내부의 dataview에서 select이벤트가 발생하면 onProgramSelect()메소드를 호출하도록 했다. onProgramSelect()메소드는 select이벤트 발생시 전달받은 게시판정보를 이용해 애플리케이션 중앙의 탭패널에 자식으로 게시판 클래스 인스턴스를 생성하여 추가하는 로직이다.

programlist.json파일을 상기시켜보자 아래와 같이 pgm_class에 일괄적으로 Ext.panel.Panel클래스가 들어 가있다. 이것은 아직 구현되지 않은 게시판 클래스 대신 Panel클래스를 넣어둔 것이다. 이러한 형태는 이후 게시판 뿐만 아니라 새로 개발된 어떤 클래스도 중앙패널에 추가할 수 있다는 것을 의미한다.

"pgm_syscd":"F001","pgm_class":"Ext.panel.Panel","pgm_icon":"grid","pgm_nm":"ExtJS","brd_number":"001" },

최종 실행하면 <그림8>과 같은 결과를 볼 수 있을 것이다.

<그림8> 최종 구현된 뼈대의 실행결과

정리하며

이번 시간에는 ExtJS의 MVC를 적용하여 애플리케이션의 뼈대를 구현해보았다. 이러한 뼈대는 향후 게시판 뿐만 아니라 어떤 어플리케이션도 배치할 수 있는 좋은 구조라 할 수 있겠다.