자바스크립트/Ext JS2013. 10. 13. 15:09

시스템 뼈대 구현하기

 

이번 강좌부터 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은 뼈대를 이룰 클래스들에 대한 설명이다.

 

클래스명

기능

Model

MyMvc.model.Program

게시판 또는 우측패널에 표시될 애플리케이션의 속성

View

MyMvc.view.WestMenuPanel

좌측에 표시할 게시판그룹

MyMvc.view.WestMenuDataViewPanel

게시판그룹에 해당되는 게시판리스트

MyMvc.view.Header

애플리케이션 상단영역

Controller

MyMvc.controller.Frame

뼈대를 제어할 Controller 클래스

Store

MyMvc.store.Programs

좌측 메뉴에 표시 할 Store

<표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를 적용하여 애플리케이션의 뼈대를 구현해보았다. 이러한 뼈대는 향후 게시판 뿐만 아니라 어떤 어플리케이션도 배치할 수 있는 좋은 구조라 할 수 있겠다.

Posted by 1 베니94

댓글을 달아 주세요

  1. 블루스톰

    ^^ 강의 잘보았습니다~ 질문있는데요~ 컨트롤에 'menuboard > dataview' : 이부분이... 처음 한번만 동작하고 먹통이네요... 계속 이벤트를 감지해야할 것 같은데... 이벤트감지가.. 안되네요~ ^^;;; 소스코드는 강의와 똑같습니다.. 어떤 부분을 빼먹은건지.. 확인할 방법이 있나요?

    2013.12.28 18:37 [ ADDR : EDIT/ DEL : REPLY ]
    • 오류 등이 없는지 콘솔을 확인해보시기 바랍니다.
      그리고 select이벤트는 itemclick이벤트와 달리 한번 클릭한 곳을
      또 클릭하면 이벤트가 발생하지 않습니다.
      이벤트가 호출이 안되는 것인지 호출된 이후 메소드가
      처리를 못하는 것인지 확인해야할 듯합니다.

      2014.01.04 02:57 신고 [ ADDR : EDIT/ DEL ]
  2. 제니

    좋은 강의 정말 감사합니다~

    저도 블루스톰님과 똑같은 상태네요.

    처음 시작할때만 이벤트가 발생해서 center에 ExtJs(001)이라는 탭이 생성된 후에

    다른 dataview를 눌러보아도 이벤트 리스닝을 하지 못하네요 ㅠ ㅠ

    방법이 있을까요 ?

    2014.01.06 01:04 [ ADDR : EDIT/ DEL : REPLY ]
  3. 무한상상예찬론자

    우선 바쁘신 와중에 이렇게 좋은 강좌를 만들어 주신 님의 노고에 대단히 감사드립니다.

    사이트를 EXT js로 구축하게 된 상황이라 본 강좌를 통해 많은 도움을 받고 있습니다.

    저 역시 본예제를 똑 같이 해보았으나 위의 블루스톰님, 제니님과 같이 이벤트가 발생하지 않는 상태입니다.

    현재는 센차doc을 보고 어떻게 처리해보려고 하고 있으나 아직 손과 눈에 익지 않아서 인지 잘 안되네요..

    브라우저 특성을 타는건지 해서 크롬, 사파리, 파폭, 오페라, 스윙 모두 테스트 해보았으나

    모두 같이 작동을 안합니다.

    앞서 말씀해 주신 체크 사항 외에 다른 힌트가 있다면 염치 불구하고 부탁드립니다.

    혹 이 강좌를 해보신 분들중에 해결 하신분 있으신 공유 좀 부탁드려요^^;


    아래는 환경을 탈지도 모른다는 생각에 현재 개발환경을 적어보았습니다.
    --------------------------------------------------------------------------------------
    os : win7 64비트
    jdk : 1.7.0.45(32비트)
    ext js : 4.2.1.883
    브라우저 : IE (10.0.0.9200, 32비트), 사파리(5.1.7, 32비트), 크롬(32.0.1700.72 m, 32비트),
    파폭(26, 32비트), 오페라(18.0.1284.68, 32비트), 스윙(1.0.0.4, 32비트)
    --------------------------------------------------------------------------------------

    2014.01.08 14:03 [ ADDR : EDIT/ DEL : REPLY ]
    • 흠.. 별문제가 없는대 말이죠..

      소스를 메일로 보내주시면 확인하겠습니다.

      에러도 없고 그냥 반응이 없는건지 모르겠군요.

      benneykwag@gmail.com으로 소스를 전송해주시면 감사하겠습니다.

      다른 분들도 보내주시면 확인하겠습니다.

      2014.01.08 22:23 신고 [ ADDR : EDIT/ DEL ]
  4. 이 글에서 이벤트가 처음만 작동한다고 하신 분들은 아래 코드를 확인해주세요.
    문제 코드 : "feed-list-item{pgm_icon}" (공백이 없음)
    개선 코드 : "feed-list-item {pgm_icon}" (2개의 스타일클래스가 다르기 때문게 공백으로 떨어트림)

    2014.01.09 22:04 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 제니

      해결되었어요!

      정말 감사합니다 ㅠ ㅠ`

      2014.01.09 23:22 [ ADDR : EDIT/ DEL ]
    • 무한상상예찬론자

      감사합니다^^;

      바쁘신 와중에 소스를 분석해주시고 복 받으실거예요~~!!

      2014.01.10 10:03 [ ADDR : EDIT/ DEL ]
  5. 욕구불만

    안녕하세요 ^^ 이해가 잘 안가서 그러는데 질문 하나만 하겠습니다.

    스토어에서 호출시 코드가

    setSubMenu: function(){
    var me = this;
    var store = Ext.create('MyMvc.store.Systems');
    store.load(function(record, b, c){
    store.each(function(rec){

    이렇게 되는데 이 부분 설명을 해주시면 정말 감사하겠습니다.
    변수 store에 만들어진 객체가 저장되는 것은 알겠는데, 그 다음의 load메소드와 each메소드 부분이 이해가 잘 가지않네요.... 감사합니다

    2014.01.14 01:42 [ ADDR : EDIT/ DEL : REPLY ]
    • benneykwag@gmail.com

      아래코드가 궁금하신 것 같습니다.
      var store = Ext.create('MyMvc.store.Systems');
      store.load(function(record, b, c){
      store.each(function(rec){

      }
      }

      스토어가 로드는 Ajax를 통해 통신이 되기 때문에 로드 이후 시점에
      접근해야 로드결과를 확인할 수 있겠지요.
      해서 store.load메소드를 호출하고 이후 익명함수(콜백)안에서 store변수에 접근하거나 function에 전달되는 인자로 접근하면 데이터가 불러진 상태에서 스토어에 접근하게 되므로 그런 코드가 나오게 됩니다.

      핵심은 스토어 호출이 끝난 시점에 스토어에 접근해야 원하는 데이터를 얻을 수 있겠습니다.
      감사합니다.

      2014.01.24 10:38 [ ADDR : EDIT/ DEL ]
  6. 초보

    아, 제가 ExtJS를 처음 접하면서 화면을 띄우기도 힘들었었는데 여기 글들을 보고 공부할 수 있어서
    너무 좋은것 같습니다!!!정말 친절히 설명과 코멘트 달아주셔서 감사합니다, 기본적인 모든 정보를 공부할 수 있는
    기회인 것 같구, 자주 와서 공부할께요.
    너무너무 감사합니다:D 늦었지만 복 많이받으세요~
    - 오늘부로 팬이된 'Benny' -

    2014.02.28 20:03 [ ADDR : EDIT/ DEL : REPLY ]
  7. 완전왕초보

    ExtJS로 디자인작업을 처음 시작했는데 어디에서도 화면디자인에 대한 정보가없어서
    한달 넘게 고생고생 하고 있습니다.
    여기서 한대로 따라 해보았지만 아예 화면도 못띄우겠네요 ㅠㅠ
    환경설정은 다 해놓아서 간단한 다른 테스트 했을경우는 화면이 띄워지는데
    여기에 레이아웃 나뉘어 나오는 MyMvc.view.WestMenuDataViewPanel.js 화면이 띄워지지 않네요 ㅠㅠ
    어떤게 문제 일까요? ㅠㅠ

    2016.07.19 20:10 [ ADDR : EDIT/ DEL : REPLY ]
  8. 완전왕초보

    제가 띄운 소스는

    Ext.onReady(function(){
    Ext.create('Ext.form.Panel',{
    title:'File',
    renderTo:Ext.getBody(),
    bodyPadding:10,
    //padding값을 주면 아래 두번째 화면 텍스트 보임
    //bodyStyle:{"background-color":"red"},
    width:400,
    height:400,
    items:[
    {
    //파일 업로드
    xtype:'filefield',
    width:300,
    listeners:{
    afterrender:function(cmp){
    cmp.fileInputEl.set({
    multiple:'multiple'
    });
    },
    change:function(){
    var file = Ext.ComponentQuery.query('filefield')[0];
    var files = file.fileInputEl.dom.files;
    var temp = "";
    for(i=0;i<files.length;i++){
    temp=temp+files[i].name+'\n';
    }
    Ext.ComponentQuery.query('textarea[name=filelist]')[0].setValue(temp);
    }
    }
    },{
    xtype:'textarea',
    name:'filelist'
    },{
    xtype:'button',
    text:'Submit',
    handler:function(){
    var form = this.up('form').getForm();
    form.submit({
    url:'fileupload.jsp',
    waitMsg:'잠시만 기다려주세요.',
    success:function(fp, o){
    //성공
    }
    });
    }
    }]
    });
    });


    이렇게 하면 띄워지는데 여기에 나와있는 소스로
    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);
    }
    });
    이렇게 하면 화면이 하얗게만 보입니다. ㅠㅠ

    2016.07.19 20:12 [ ADDR : EDIT/ DEL : REPLY ]
  9. 서영

    ExtJS 6 삽질중입니다.
    UI 디자인작업을 ExtJS로 하려고 하니
    한달내내 시간만 가고 있네요
    여기저기 검색하다 들어왔어요
    자료도 없고 책도 마땅한게 없어서 계속 고민중입니다.
    혹시저에게 알려줄 정보 있으시면 부탁좀 드릴께요
    Ext.define으로 js구현해주면
    불러들이는 소스가 있어야 화면이 보여지나요?
    Ext.define만으로는 화면이 하얗게 보여지네요 ㅠㅠ

    2016.07.25 14:56 [ ADDR : EDIT/ DEL : REPLY ]

자바스크립트/Ext JS2013. 10. 13. 15:08

오늘날 웹은 비약적인 발전을 이뤄, 이전에는 할 수 없었던 많은 일들이 웹상에서 가능하게 됐다. 웹의 패러다임이 변한만큼 기술도 서버에서 클라이언트로 중심이 이동했다. 이 정에서 자바스크립트 UI 프레임워크가 대세로 자리 잡은 게 현실이지만, 코드는 복잡해지고 유지보수와 확장성의 한계를 드러내게 됐다. 그런 점에서 개발 단계에만 초점이 맞춰진 여타 프레임워크에 비해 ExtJS는 유지보수와 향후 확장이 용이한 MVC 아키텍처를 제공하고 있다.

 

이번 시간에는 ExtJS의 MVC 패턴을 구현해 보고, MVC 패턴을 실무에서 어떻게 활용할 수 있는지 알아보자. 우선 ExtJS에서 사용하는 MVC 패턴을 살펴보겠다.

 

M : 모델(Model)을 지칭한다. ExtJS에서는 데이터를 표현하는 단위가 모델이다. 스토어(Store)가 필요로 하는 Grid, DataView, Form 등의 컴포넌트와 연결될 수 있다.

V : 뷰(View)는 데이터를 표현할 수 있는 모든 컴포넌트를 지칭한다. 모델을 통해 뷰는 데이터를 전달받아 이를 표현한다.

C : 컨트롤러(Controller) 뷰 사이에서의 통신을 처리한다. 컨트롤러는 뷰와 스토어를 참조할 수 있고, 자신이 관장하는 모든 뷰에서 발생하는 이벤트를 감시하며, 각 뷰에게 특정 처리에 대한 명령을 내리는 핵심적인 역할을 한다.

 

우리는 한 가지 내용을 더 알아야 한다. 바로 스토어다. 스토어는 모델들의 집합체로, 서버에서 통신 데이터를 가져오고, 이 데이터를 모델단위로 탑재해 Grid, DataView, Tree 등과 같은 컴포넌트에 전달한다.

이제 코드를 통해 MVC 패턴을 구현해 보자. ExtJS는 Sencha Cmd에서 애플리케이션을 생성하고 빌드할 수 있도록 지원한다.

 

개발환경 구축

개발환경 구축을 위해 Sencha Cmd와 ExtJS를 다운로드 받아 설치하고 환경을 세팅해보도록 하겠다.

아래 <그림 0-0>과 같이 Sencha사이트에 접속하여 좌측의 "Download"를 클릭하여 ExtJS를 다운받고 우측 하단의 "Sencha Cmd"를 클릭하면 <그림 0-1>과 같이 Sencha Cmd를 다운받는다.

<그림 0-0> extjs와 Sencha Cmd 다운로드 페이지

 

<그림 0-1> Sencha Cmd다운로드 페이지

 

이제 다운로드 받은 프로그램을 설치 하도록 하자. 참고로 자바가 먼저 설치되어 있어야 한다.

첫번째는 Sencha Cmd 설치파일을 실행하고 아래 <그림 0-2>에서 "Next"버튼을 클릭한다.

<그림 0-2> Sencha Cmd설치 화면1

 

아래 <그림 0-3>에서 "I accept the agreement"에 체크하고 "Next"버튼을 클릭하자.

<그림 0-3> Sencha Cmd설치 화면2

 

아래 <그림 0-4>에서 설치 폴더를 설정하고 "Next"버튼을 클릭한다.

<그림 0-4> Sencha Cmd설치 화면3

 

이후 계속 "Next"버튼을 클릭하면 설치과정이 진행되고 최종 "Finish"버튼을 클릭하면 Sencha Cmd 설치가 완료된다.

설치가 정상적인지 확인하기 위해 명령프롬프트 창을 열고 "sencha"명령을 실행해서 아래<그림 0-5>와 같이 나오면 설치가 잘 된것이다.

<그림 0-5> Sencha Cmd설치 확인화면

 

이 과정을 거쳤다면 C드라이브에 Sencha라는 폴더가 생성되었고 안으로 들어가면 Cmd폴더에 Sencha Cmd가 설치 되었을 것이다. 이제 다운로드한 Extjs4 라이브러리를 압축을 해제하고 C:\Sencha폴더 아래에 옮기도록 한다.

<그림 0-6> 설치 이후 폴더구조

이제 테마컴파일을 위해 루비를 설치하자. 아래 사이트에 접속하여 루비 Ruby 1.9.3-p448를 내려받고 설치하자.

http://rubyinstaller.org/downloads/

Sencha Cmd에서는 1.8또는 1.9버전만 지원한다. 꼭 1.9버전을 설치하자.

다음으로는 <그림 0-7>과 같이 빌드 과정에서 테마를 위한 sass컴파일용 compass를 설치하자.

 

<그림 0-7> compass 설치과정

  혹여 윈도우 7에 경우 정상적으로 설치 되지 않는 경우가 있는데 이때는 아래 사이트를 참고하여 수동으로 compass를 설치할 수 있다. 

http://awordpress.net/install-sass-compass-manually-windows/


애플리케이션 생성

아래 명령을 실행하여 MyMvc라는 애플리케이션을 생성하자.

sencha -sdk C:\Sencha\ext-4.2.1.883 generate app MyMvc c:\Sencha\MyMvc

 

<그림 1> Sencha Cmd로 생성한 애플리케이션 폴더 구조

 

Sencha Cmd을 통해 생성된 애플리케이션의 주요 코드를 살펴보자. <리스트 1>은 app.js와 application.js의 코드다. 이 두 개의 파일에는 애플리케이션의 주요 설정이 들어있다. ①은 만들려는 애플리케이션 이름이다. 보통 패키지 명의 최상위 이름을 사용한다. ②에서는 application.js의 클래스를 상속했다. ③은 Viewport 객체를 자동으로 생성할 것인지를 설정하는 부분이다. 이때 값이 true이면 view 폴더의 Viewport 클래스를 자동으로 호출할 수 있다. ⑥은 ③이 false일 경우 이 함수 내부에서 Viewport를 별도로 생성하면 사용할 수 있다.

 

<리스트 1> app.js와 application.js 내부 코드

// app.js

Ext.application({

    name: 'MvcApp', // ① 애플리케이션 명

    extend: 'MvcApp.Application', // ② application.js를 상속했다.

    autoCreateViewport: true    // ③ view.Viewport의 인스턴스 생성

});

// application.js

Ext.define('MvcApp.Application', {

    name: 'MvcApp',        

    extend: 'Ext.app.Application',    // ④ 애플리케이션 실행 이후 처리

    controllers: [

        'FrameController'        // ⑤ 사용할 컨트롤러

    ],

    launch:function(){        // ⑥ 애플리케이션 실행 이후 처리

    }

});


<리스트 1>에서 autoCreateViewport를 true로 설정해 view 폴더에 Viewport.js 파일을 만들어 구현해야 한다. <리스트 2>와 같이 border layout을 사용해 서쪽, 북쪽, 중간에 container를 배치한다.

 

<리스트 2> Viewport.js 파일 코드

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

    extend: 'Ext.container.Viewport',

    layout : 'border',

    items: [{

        region: 'north',

        xtype: 'container',

        height : 100,

        style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }

    }, {

        region: 'center',

        xtype: 'container',

        style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }

    }, {

        region: 'west',

        xtype : 'container',

        style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' },

        width: 200

    }]

});


이제 애플리케이션을 실행해 보자. <리스트 3>과 같이 Sencha Cmd에서 제공되는 웹서버를 작동시킨다.

 

<리스트 3> 애플리케이션 실행 코드

C:\Sencha>sencha fs web -port 8000 start -map c:\Sencha\MvcApp

Sencha Cmd v4.0.0.126

[INF] Starting shutdown listener socket

[INF] Listening for stop requests on: 1916

[INF] Mapping http://localhost:8080/ to c:\Sencha\MvcApp...

[INF] Starting http://localhost:8080

[INF] jetty-8.1.7.v20120910

[INF] NO JSP Support for /, did not find org.apache.jasper.servlet.JspServlet

[INF] started o.e.j.w.WebAppContext{/,file:/C:/Sencha/MvcApp/}

[INF] started o.e.j.w.WebAppContext{/,file:/C:/Sencha/MvcApp/}

[INF] Started SelectChannelConnector@0.0.0.0:8080

[INF] Started http://localhost:8080


브라우저에서 실행하면 <그림 2>와 같은 결과를 볼 수 있다.

<그림 2> index.html 실행 결과

 

그 다음 컨트롤러를 구현하자. controller 폴더에 FrameController.js 파일을 만들고 <리스트 4>와 같이 작성한다.

 

<리스트 4> FrameController.js 코드

Ext.define(' MvcApp.controller.FrameController', {

    extend : 'Ext.app.Controller',

    views : [],            // ① 참조할 뷰

    stores : [],        // ② 참조할 스토어

    refs : [],            // ③ 참조할 뷰 getter 설정

 

    init : function(app) {    // ④ 초기화

        this.control({        // ⑤ 현재 컨트롤러 영역

            'button' : {    // ⑥ 이벤트를 일으킨 컴포넌트

                click : function(){    // ⑦ 이벤트

                    console.log(arguments);

                }

            }

        });

    }

});


<리스트 4>를 자세히 살펴보자. ①에서는 컨트롤러가 참조할 View 클래스를 명시한다. 여기에 명시되면 각 뷰에서 발생하는 이벤트를 감지할 수 있다. ②에서는 애플리케이션에서 공유할 스토어를 명시했다. 단, 공유하지 않고 독립적으로 사용하는 스토어는 기입하지 않으며 각각의 View 클래스별로 따로 생성해야 문제가 없다.

③에는 참조된 View 클래스를 어떤 이름으로 사용할지 기입한다. 이 부분은 뒤에서 설명하겠다. ④는 컨트롤러의 핵심으로, 참조하는 모든 View 클래스에서 발생하는 이벤트를 감지하는 영역이다. ⑥과 ⑦은 Viewport의 Button에서 Click 이벤트가 발생하면 console.log를 실행하는 코드다.

이제 <리스트 4>가 작동되도록 <리스트 1>코드에 있는 ③ 'FrameController' 주석을 제거하고 <리스트 2>에서의 north 영역 코드를 <리스트 5>와 같이 수정하자.

 

<리스트 5> Viewport.js의 north 영역 코드

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

..

items: [{

region: 'north',

     xtype: 'button',

     text : 'Button',

     height : 100,

     style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }

    },

    ..


코드를 실행하고 north 영역의 버튼을 선택하면 <그림 3>과 같은 결과를 얻을 수 있다. <그림 3>과 같이 선택된 버튼 이벤트를 컨트롤러가 감지해야 원하는 명령을 내릴 수 있다.

 

<그림 3> 버튼 추가 후 실행화면

 

이제 좀더 복잡한 코드를 만들어 보자. <그림 4>에서 빈 칸으로 남겨둔 views, stores, ref를 구현하겠다. 아직 비어있는 Viewport의 중간 패널에 간단한 그리드 패널을 추가하고 Click 이벤트를 가지고 특정 함수를 호출한다. <리스트 6>, <리스트 7>, <리스트 8>, <리스트 9>와 같이 클래스를 생성하고 각 폴더에 추가하자.

<리스트 6> Program Model 클래스

// app/model/Program.js

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

    extend: 'Ext.data.Model',

fields: [

        'pgm_nm',

        'pgm_class'

]

});


<리스트 7> Program Store 클래스

// app/store/Programs.js

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

    extend : 'Ext.data.Store',

    autoLoad : false,

    model : ' MvcApp.model.Program',

    proxy : {

        type : 'ajax',

        url : '/json/programlist.json',

        reader : {

            type : 'json',

            root : 'entitys',

            totalProperty : 'totalCount',

            messageProperty : 'message'

        }

    }

});


<리스트 8> 스토어에 제공할 데이터 파일

// 웹루트에 json 폴더를 만들고 programlist.json 파일을 생성한다.

{"entitys":[{    "pgm_class":"benney.board.Board","pgm_nm":"게시판"},

            {    "pgm_class":"benney.login.Login","pgm_nm":"로그인"}],

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

}


<리스트 9> 새로 추가할 그리드 클래스

Ext.define(' MvcApp.view.MyGrid',{

    extend : 'Ext.grid.Panel',

    alias : 'widget.mygrid',

    

    initComponent : function(){

        var me = this;

        Ext.apply(this, {

            store : 'Programs',

            columns : [{

                text : '클래스 이름 ',

                flex : 1,

                dataIndex : 'pgm_class'

            },{

                text : '프로그램명 ',

                flex : 1,

                dataIndex : 'pgm_nm'

            }]

        });

        me.callParent(arguments);

    }

});


이때 컨트롤러에서 <리스트 9>의 MyGrid 클래스와 Programs Store 클래스를 참조할 수 있게 코드를 수정한다.

 

<리스트 10> 변경된 컨트롤러 클래스

Ext.define(' MvcApp.controller.FrameController', {

    ..중략..

    views : ['MyGrid'],            // ① 참조할 뷰

    stores : ['Programs'],        // ② 참조할 스토어

    refs : [{

        ref : 'myGrid',

        selector : 'mygrid'

    }],            // ③ 참조할 뷰의 getter 설정

..

});

그리고 Viewport 클래스의 center 영역에 MyGrid 클래스의 widget명을 추가한다(<리스트 11> 참조).

<리스트 11> Viewport 클래스 center 영역 수정

{

    region: 'center',

    xtype: 'mygrid',

    style : { borderColor : '#000000', borderStyle :'solid', borderWidth : '1px' }

},


이제 브라우저를 재실행해 결과를 확인한다(<그림 4> 참조).

<그림 4> MyGrid 클래스를 추가한 결과

 

컨트롤러에 있는 views:[] 부분에 MyGrid 클래스를 등록해 Viewport 클래스에 있는 widget명인 'mygrid'로 사용할 수 있다. 만약 컨트롤러에 등록된 코드를 지우면 프로그램은 정상으로 작동하지 않는다.

그 다음 Viewport 상단 버튼을 선택해 하단 그리드에 있는 데이터가 표시되게 하고, 표시된 그리드를 선택하면 그리드 패널의 타이틀이 세팅되도록 <리스트 12>와 같이 수정하자.

 

<리스트 12> 수정된 FrameController 컨트롤러

Ext.define(' MvcApp.controller.FrameController', {

    ..        

    init : function(app) {    // ④ 초기화

        this.control({        // ⑤ 현재 컨트롤러 영역

            'button' : {    // ⑥ 이벤트를 일으킨 컴포넌트

                click : function(){    // ⑦ 이벤트

                    this.getStore('Programs').load();// ⑧

                }

            },

            'mygrid' : {    // ⑨

                itemclick : this.myGridClick    // ⑩

            }

        });

    },

    myGridClick : function(){

        var grid = this.getMyGrid();    // ⑪

        grid.setTitle('그리드 클릭');

    }

});

<리스트 12>를 자세히 설명하겠다. ⑥에 있는 이벤트를 발생시킨 컴포넌트로 인해 버튼에서 ⑦에서는 Click 이벤트가 발생했고, 그 결과 ⑧을 실행시킨다. ⑧에 있는 this.getStore() 메소드는 컨트롤러 상단 stores:[]에 등록된 스토어를 호출하게 해주고, 스토어의 load() 메소드가 호출됨으로써 그리드에 데이터가 출력된다.

⑨와 ⑩에서 그리드에 표시된 데이터 로우를 클릭하면 myGridClick 함수가 호출된다. 그리고 ⑪의 this.getMyGrid() 함수는 컨트롤러 상단의 ref 참조란에 표기된 ref:'myGrid'의 getter 메소드다. 또 this.getMyGrid() 함수를 통해 MyGrid 클래스의 인스턴스에 접근해 setTitle 메소드로 그리드 패널의 title 속성을 변경한 것이다.

변경된 코드를 실행하면 <그림 5>와 같은 결과를 얻을 수 있다.


<그림 5> 수정된 컨트롤러의 실행결과

 

이렇게 해서 하나의 MVC 애플리케이션을 완성했다. 이제 Sencha Cmd를 통해 배포과정을 진행해 보자. 애플리케이션 폴더로 이동해 <리스트 13>과 같이 빌드 과정을 진행한다.

 

<리스트 13> 애플리케이션 배포 코드

C:\Sencha\MvcApp>sencha app build

Sencha Cmd v4.0.0.126

[INF]

[INF] init-plugin:

[INF]

[INF] cmd-root-plugin.init-properties:

[INF]

[INF] init-properties:

… 중략…

[INF] -after-build:

[INF]

[INF] build:

[INF]

[INF] app-build:


빌드가 완료됐으니 최종 배포할 애플리케이션과 개발 단계의 애플리케이션이 어떻게 다른지 알아보자. <그림 6>은 빌드 전 캐시를 모두 지운 상태에서 최초로 실행한 결과이고, <그림 7>은 캐시를 이용 두 번째 실행한 결과를 개발자 도구에 있는 Network 탭에서 확인한 결과다.

 

<그림 6> 개발 버전의 최초 실행결과

 

<그림 7> 개발 버전의 두 번째 실행결과

 

이제 빌드를 완료한 배포판 애플리케이션을 실행하고 <그림 6>과 <그림 7>과 동일하게 <그림 8>과 <그림 9>처럼 확인하자. Sencha Cmd는 웹루트/build/MvcApp 이하에 애플리케이션을 빌드하므로 이를 브라우저에서 실행하면 된다.

 

<그림 8> 배포판의 최초 실행결과        

 

<그림 9> 배포판의 두 번째 실행결과

 

<그림 6>부터 <그림 9>까지의 결과를 정리한 것이 <표 1>이다.

 

 개발 버전

 배포 버전

 캐시 Ⅹ

 캐시 ○

 캐시 Ⅹ

 캐시 ○

 요청 파일 수

 13개

 13개

 4개

 3개

 전송용량

 6.8MB

 4.5KB

 2.2MB

 542Byte

 실행시간

 894ms

 503ms

 626ms

 68ms

<표 1> 개발 버전과 배포 버전의 네트워크 사용량 비교

 

<표 1>에서 캐시를 사용한 결과를 비교하자. Sencha Cmd는 빌드 시 사용되는 모든 클래스를 하나의 파일 합치고 공백과 변수 등을 1Byte로 줄여 전반적인 배포 용량을 줄였다. 이를 통해 실행시간 또한 대폭 줄어 든 것을 확인 수 있다. 이는 애플리케이션 규모가 커질수록 이런 빌드 과정이 절대적으로 필요함을 느끼게 해주는 부분이다.

 

정리하며

지금까지 ExtJS의 MVC 애플리케이션을 구현하고 Sencha Cmd를 통해 애플리케이션을 배포하는 과정을 알아봤다. 이후 진행될 연재에서는 지금까지 살펴본 것들을 가지고 게시판을 개발하면서 좀더 구체적인 ExtJS의 코드를 알아보겠다.

Posted by 1 베니94
TAG extjs, MVC

댓글을 달아 주세요

  1. lee

    이것좀 봐주세요
    Ext.onReady(function(){
    var selNodeObj=null;


    var store = Ext.create('Ext.data.TreeStore', {
    id: 'store',
    autoHeight:true,


    autoLoad: false,
    // autoSync: true,
    root :{
    text : '프로젝트명',
    name : '1단',
    expanded : false,
    },
    proxy : {
    type : 'ajax',
    api: {
    read : '/auto/tree/json/jsonobject.do',
    create: '/auto/tree/EgovTreeCreateInsert.do',
    update: '/auto/tree/EgovTreeCreateUpdate.do',
    destroy: '/auto/tree/EgovTreeCreateDelete.do'

    },
    reader: {
    type: 'json',
    successProperty:'success',
    rootProperty: 'children',
    // rootProperty: 'items',
    messageProperty:'message'
    // ,root:'tree'
    }
    ,writer:{
    type:'json',
    writeAllFields:true,
    // root:'auto'
    encode:true,
    rootProperty:'children'
    }

    },
    listeners: {



    }







    });

    var tree = Ext.create('Ext.tree.Panel', {
    title: '에스제이테크시스템',
    id: 'tree',
    rootVisible: true,
    multiSelect: true,
    store: store,
    viewConfig: {
    plugins: {
    ptype: 'treeviewdragdrop',
    enableDrag: true,
    enableDrop: true
    }
    },
    multiSelect: true,
    plugins: 'cellediting',
    columns: [{
    header:'프로젝트명',
    xtype: 'treecolumn',
    dataIndex: 'text',
    flex: 1,
    editor: {
    xtype: 'textfield',
    allowBlank: false,
    allowOnlyWhitespace: false
    }
    },{header:'합계',dataIndex:'disable',flex:1, editor: {
    xtype: 'textfield',
    allowBlank: false,
    allowOnlyWhitespace: false
    },width:500}],
    renderTo: Ext.get('treeList'),
    listeners:{
    itemcontextmenu : function( object, record, item, index, e){
    e.stopEvent();
    var menu = Ext.create('Ext.menu.Menu',{
    items : [
    {
    text: '추가',
    handler: onItemClick,
    iconCls: 'icon-edit'
    },
    {
    text: '삭제',

    handler: onItemClick
    }
    ]
    });
    menu.showAt(e.getXY());
    }
    }

    });
    function onItemClick(item){
    node = store.getNodeById("Node1");
    var treePanel = Ext.getCmp('tree');
    if(item.text=='삭제'){

    var record = treePanel.getSelectionModel().getSelection()[0];
    record.remove(true);
    store.sync();

    }else if(item.text=='추가'){


    var selNode = treePanel.getSelectionModel().getSelection()[0];
    selNodeObj=selNode;
    var appendedChild = selNode.appendChild({
    // task: 'Task1',
    // user: 'Name',
    // duration: '10',
    text : '추가',
    name : '1단',
    leaf: true
    });
    var newRecords = store.getNewRecords();
    Ext.each(newRecords, function(record,index){
    console.log('New (',index,')',record.get('name'));
    });
    store.sync();

    }

    }

    });

    여기서 proxy를 사용했는데요 아래에 api를 지정하고 하면 삭제시에 destroy 수정시 update, 트리 추가시에 create롤 타겠끔 할려고 합니다 어떻게 해줘야 타는지요 ?

    이것에 대한 방법을 아시면 메일로 좀 보내주세요
    ldongkyu@hanmail.net 입니다
    감사합니다

    2015.07.15 12:18 [ ADDR : EDIT/ DEL : REPLY ]

자바스크립트/Ext JS2013. 10. 13. 15:08

ExtJS 4 클래스 시스템


ExtJS는 300여개 이상의 클래스와 이를 기반한 아키텍쳐를 가졌다. 객체지향 언어를 표방해 상속, 다중상속, 이벤트를 통한 접근 등 고급언어에서 볼 수 있는 거의 모든 개념을 탑재해 다양하고 복잡한 어플리케이션 구현이 가능하다.


자바스크립트는 유연한 언어다. 그러나 이러한 유연함이 많은 코딩스타일과 기법 등을 낳게 됐고 코드를 예측하거나 유지하는 데 많은 비용을 지불하게 됐다. ExtJS 클래스 시스템은 캡슐화를 지원하고, 표준코딩 컨벤션을 사용 할 수 있어 작성된 코드의 예측, 확장이 용이하다. ExtJs 클래스시스템을 통해 시간이 지날 수록 어플리케이션의 가치는 증가하고 안정적인 유지보수가 가능해 진다.

 

이장에서는 아래 기능을 통해 ExtJs의 새로운 클래스시스템을 맛보고 배우게 된다. ExtJS를 이해하는 가장 기초적이며 가장 중요한 장이라 하겠다.

  • 클래스 선언과 생성
  • Config 기반 구성요소
  • 상속(클래스 확장)
  • 믹스인(Mixins)
  • 스태틱
  • 동적 클래스 로딩
  • Alias(xtype)

클래스 선언과 생성

아래 코드는 전형적인 ExtJS 클래스 정의 및 생성 방법이다.

Ext.define('MyClass', {         // Step 1

    extend : 'Ext.panel.Panel',     // Step 2

    title : '안녕하세요 환영합니다.^^',

    initComponent : function() {     // Step 3

        var me = this;

        this.callParent(arguments);    // Step 4

    }

});

 

var myClass = Ext.create('MyClass', {     // Step 5

    renderTo : Ext.getBody()

});

 

Step1 : Ext.define함수를 통해 클래스를 정의했다. 클래스명에는 문자와 숫자가 포함될 수 있고 밑줄은 권장하지 않는다. 패키지를 표현하기 위해 '.'으로 구분하며 아래 예시처럼 최상위이름과 최종이름은 카멜케이스를 쓰고 그 외에는 소문자로 표현하는 것을 권장한다.


    MyClass.form.action.AutoLoad

 

Step2 : 상속받아 확장하려는 클래스를 명시한다. ExtJS는 300여개 이상의 클래스가 존재하고 이중 하나를 골라 적절히 수정해 원하는 기능을 구현한다.

    

Step3 : 확장할 클래스 기능을 재정의 할 때 initComponent함수가 사용된다.

이 함수는 확장할 클래스 구성요소를 초기화하고 원하는 대로 변경 할 수 있게한다.

 

Step4 : "this.callParent(arguments)"는 확장할 클래스의 initComponent함수를 호출한다. 이는 재정의한 내용을 확장할 클래스에 전달해서 확장할 클래스가 작동하기 위함이다.

 

Step5 : 정의된 클래스를 사용하기 위한 클래스 생성코드다. ExtJs는 정의된 클래스를 생성시 Ext.create함수를 사용해 생성하고 위 코드처럼 특정 변수에 인스턴스를 저장한다.

 

아래 그림은 위의 코드를 실행한 결과다.

Config 기반 구성요소

ExtJS 클래스 시스템은 config설정 기능을 제공한다. 클래스에 config옵션을 정의하면 클래스 시스템은 자동으로 4개 메소드(getter, setter, reset, apply)를 생성한다. 이를 통해 클래스에 매개변수를 전달해 값을 설정하고 수정할 수 있으며 코드라인이 줄어들어 API간 일관성을 유지할 수 있는 장점을 제공한다.

 

새로운 클래스를 만들고 config를 설정 해보자.

Ext.define('Benney.ClassRoom', {

    config : {                // Step1

        grade : '미정',

        className : '미정',

        teacher : '미정'

    },

    constructor : function(config) {    

        this.initConfig(config);    // Step2

    },

    getString: function(){    // Step3

        return     '- 교실정보 -\n학년 : '

                + this.getGrade()

                + '\n반명 : ' + this.getClassName()

                + '\n담임 : ' + this.getTeacher();

    }

},

function() {

    console.log('Benney.ClassRoom class가 정의됐음!');

});

 

var classroom = Ext.create('Benney.ClassRoom');    // Step4

classroom.setGrade('2');                // Step5

classroom.setClassName('꾸러기')

classroom.setTeacher('홍길동');

console.log(classroom.getString());            // Step6


아래 그림은 위의 코드를 실행한 결과다.

Step1 : config정보를 정의한다. 위의 코드에서는 grade, className, teacher 등 3개 config변수를 선언했다.

 

Step2 : 생성자 함수로 여기서는 'this.initConfig(config)'함수를 호출해 config변수를 초기화 했다. 예제는 기존 ExtJS클래스를 확장하지 않아 생성자에 'this.initConfig(config)'를 호출하지만 확장하면 initComponent함수 내부에서 실행되게 코딩 해야한다.

 

Step3 : getString()함수는 config로 설정된 내부 변수값을 확인하기 위해 각 config 변수의 getter메소드를 호출한다.

 

Step4 : 정의한 클래스를 생성한다.

Step5 : 외부에서 새로운 값을 세팅한다.

Step6 : 새로 세팅된 값이 적용됐는지 getString메소드를 통해 확인한다.

 

위에서 getter, setter메소드를 알아봤다. 이제 소스를 수정해 apply메소드를 알아보자.

apply메소드는 setter메소드 호출 시 자동으로 실행된다..

아래 코드는 setter메소드 이후에 apply메소드가 호출되는지 알아보기 위해 각config변수에 맞는 apply메소드를 재정의 하였다. 기존 getString메소드의 텍스트 문구는 각 apply메소드로 이전했다.

    applyGrade : function(grade){

        this.grade = '학년 : ' + grade

    },

    

    applyClassName : function(className){

        this.className = '반명 : '+ className;

    },

    

    applyTeacher : function(teacher){

        this.teacher = '담임 : '+ teacher;

    },

    getString: function(){    // Step3

        return     '- 교실정보 -\n'

                + this.getGrade()

                + '\n' + this.getClassName()

                + '\n' + this.getTeacher();

    }


위의 코드를 실행하면 이전과 동일한 내용의 결과가 확인된다. 이처럼 apply메소드는 setter메소드와는 달리 config값을 포함한 그 밖의 내용을 설정하기 위해 사용한다.

  

상속(클래스 확장)

ExtJS는 extend함수를 통해 상속을 지원한다. 상속을 통해 이미 존재하는 클래스 기능을 그대로 사용하면서 원하는 기능만 일부 수정한다. 상속을 통해 UI가 존재한다면 UI를, 기능이 존재한다면 함수를 재활용 한다.

아래 코드는 'ClassRoom'클래스를 정의하고 이를 확장해 'Student'클래스를 만든다.


  •  ‘RiaApp.ClassRoom’이라는 이름의 클래스를 정의한다.

Ext.define('RiaApp.ClassRoom', {

    config : {

        grade : '미정',

        className : '미정',

        teacher : '미정'

    }

});


  • config정보를 재정의할 apply메소드를 정의한다.

applyGrade : function(grade) {

this.grade = '학년 : ' + grade

},

      applyClassName : function(className) {

this.className = '반명 : ' + className;

},

applyTeacher : function(teacher) {

this.teacher = '담임 : ' + teacher;

},


  • 생성자를 정의하고 config정보를 초기화 한다.

constructor : function(grade, className, teacher) {

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

if (grade) // setter메소드로 인자로 받아온 값을 세팅한다.

this.setGrade(grade);

if (className)

this.setClassName(className);

if (teacher)

this.setTeacher(teacher);

},


  • 전체 config정보를 출력 할 메소드를 정의한다.

getString : function() {

  console.log('RiaApp.ClassRoom called')

        return '\n- 교실정보 -\n' + this.getGrade() + '\n' +  this.getClassName()

                + '\n' + this.getTeacher();

}


  • 클래스를 실행할 코드를 만든다. 클래스명 뒤에 학년, 교실명, 담임명을 인자로 전달하면 생성자에 의해 
    config정보가 세팅된다.

var classroom = Ext.create('RiaApp.ClassRoom', '2', 'ExtJS배워보기', '홍길동');

console.log(classroom.getString());

    

  • 프로그램을 실행하고 콘솔을 통해 확인한다.

  • ClassRoom클래스를 확장해 Student클래스를 만들어 보자. 이 Student클래스는 studentName,
    studentAddress라는 두개 config변수를 가진다.

Ext.define('RiaApp.Student',{

extend : 'RiaApp.ClassRoom',    // 확장클래스명

      config : {                // config

          studentName : '',

          studentAddress : ''

}

});


  • 생성자를 구현한다. 생성자는 외부로부터 인자를 받아 현클래스 config정보를 세팅하고 확장한 클래스 
    생성자도 호출해 config정보를 세팅했다.

constructor : function(grade, className, teacher,

      studentName, studentAddress) {    // Step1

            

          this.initConfig();    // Step2

          if (studentName)     // Step3

              this.setStudentName(studentName);

          if (studentAddress)

              this.setStudentAddress(studentAddress);

            

          // Step4

          this.callParent([ grade, className, teacher ]);

},

Step1 : 클래스 생성시 외부에서 받아올 인자로 확장할 클래스에서 사용할 인자도 포함한다.


Step2 : config정보 초기화를 위해 this.initConfig()를 호출한다.


Step3 : 인자로 받아온 값이 정상적이라면 setter메소드를 통해 config를 설정한다.


Step4 : this.callParent함수는 확장한 슈퍼클래스의 함수를 호출 한다. 이 코드를 호출한 함수와 동일한 이름의 함수를 슈퍼클래스에서 호출한다. 여기서는 생성자에서 호출돼 슈퍼클래스 생성자를 호출한다. this.callParent호출 시 3개(grade, className, teacher) 인자를 넘긴다. 슈퍼클래스 생성자 또한 이 3개 인자를 받아 구현됐다.


  • getStudent함수는 getString()함수와 함께 학생정보와 교실정보를 한꺼번에 표시한다..

getStudent : function(){

    return '- 학생정보 -'

    + '\n이름 : '+ this.getStudentName()

    + '\n주소 : '+ this.getStudentAddress() +

    this.getString();

},


  • getString()함수를 보자. 아래 코드는 return this.callParent()만 존재한다. 이는 슈퍼클래스 getString()함수를 호출하고 그 값을 반환하라는 의미다.

getString : function() {

    console.log('RiaApp.Student called')

    return this.callParent();

}


  • 여기까지 ClassRoom클래스를 확장해 Student클래스를 작성했다. 작성된 클래스를 생성하고 getStudent()함수를 호출한다.

var student = Ext.create('RiaApp.Student','2','꾸러기', '홍길동','김철수', '경기도 고양시 일산동');

console.log(student.getStudent());


  • 아래 그림은 위의 코드를 실행한 결과다.

클래스 확장은 가장 강력한 기능이고 모든 클래스에서 광범위하게 사용된다. 위에서는 쉽게 설명하기 위해 UI가 없는 클래스를 작성했지만 대부분 UI콤포넌트를 확장해 프로그래밍을 한다.

 

믹스인(Mixins)

ExtJs는 단일 클래스만 상속할 수 있어 다중 상속을 지원하기 위해 믹스인(Mixins)을 사용한다. 여러개 클래스를 믹스인을 통해 참조하고 참조된 클래스 기능을 사용할 수 있게 했다. 상속(extend)과 override와 유사하지만 이미 존재하는 함수를 교체하지 않는다.

앞서 설명한 'ClassRoom'클래스를 Mixins에 포함시키고 Ext.panel.Panel클래스를 확장해 UI를 갖는 변형된 Student클래스를 만든다. 대부분 경우 UI 클래스로 이와 함께 config를 포함하면서 Mixins를 같이 사용하는 경우를 위한 예제다.


  • Ext.define을 사용 클래스를 정의한다. 이전 'Student'클래스와 달리 Ex.panel.Panel클래스를 상속받고 mixins내부에 classroom변수에 'RiaApp.ClassRoom'클래스를 문자열로 참조했다.

Ext.define('RiaApp.Student',{

    extend : 'Ext.panel.Panel',

        config : {

            studentName : '',

            studentAddress : ''

        },

        mixins : {

            classroom : 'RiaApp.ClassRoom'

        },


  • initComponent는 컴포넌트 초기화를 위한 함수다. 아래처럼 코드구현이 끝나면 this.callParent()를 실행, 상속한 클래스의 initComponent함수를 호출하고 동일한 초기화를 진행한다. this.mixins.classroom.constructor은 mixins에 설정된 변수에 접근하기 위한 코드다. 'ClassRoom'클래스에 접근해 생성자를 호출하고 3개 인자를 전달한다.

      initComponent: function(){

          // mixins의 classroom변수에 접근 생성자 호출

          this.mixins.classroom.constructor

              (this.grade, this.className, this.teacher );

      

          this.callParent(arguments);

},


  • 학생정보를 출력하는 함수다. Mixins을 참조해 'ClassRoom'클래스 getString()함수를 호출한다.

getStudent : function(){

            return '- 학생정보 -'

            + '\n이름 : '+ this.getStudentName()

            + '\n주소 : '+ this.getStudentAddress() +

            this.mixins.classroom.getString();

      }


  • 실행코드를 작성한다. 이 클래스는 Ext.panel.Panel클래스를 상속받아 이전과 달리 config정보를 인자로 전달하지 않고 아래처럼 '{}'내부에 Panel에서 사용하는 기타 정보와 같이 전달했다.

    var student = Ext.create('RiaApp.Student',{

        title : 'Hello Student !!',

        html : '안녕하세요 여러분',

        grade : '2',

        className : '꾸러기',

        teacher : '홍길동',

        studentName : '김철수',

        studentAddress : '경기도 고양시 일산',

        renderTo : document.body

    });

 

  • 위의 코드를 실행하면 아래처럼 이전과 동일한 내용이지만 Ext.panel.Panel클래스로 인해 UI가 존재하는 클래스가 됐다.

 

스태틱

모든 클래스는 스태틱(statics)메소드를 정의할 수 있다. static은 인스턴스를 생성하지 않고 접근이 가능하다. 즉 create로 생성하지 않고 '클래스명.변수/함수'로 접근한다.

아래 코드를 살펴보자. (좀더 보강…)

Ext.define('Student', {

config : {

          studentName : null

      },

statics : {


studentCount : 0,

            student : function(studentName) {

                return new this({    // 강제로 생성자 호출

                    studentName : studentName

                });

}

},

      // 생성자

constructor : function(config) {

this.initConfig(config);

     // this.statics().studentCount++;과 동일

this.self.studentCount++;

return this;

}

});

var student1 = Student.student('홍길동');

var student2 = Student.student('김철수');

console.log(student2.getStudentName());

console.log(Student.studentCount);

 

아래 그림은 위의 코드를 실행한 결과다.

동적클래스 로딩

동적 클래스 로딩은 ExtJS4의 새로운 기능으로 빠른 페이지 로딩보다는 유연성이 중요한 개발환경에서 사용된다. 자바스크립트를 사용하기 위해 HTML파일 내부에 아래처럼 자바스크립트 파일을 포함시켜야 한다.

<script type="text/javascript" src="app.js"></script>

운영환경은 모든 자바스크립트 파일을 병합, 압축해 HTML파일에 포함시키지만 개발환경에서는 병합, 압축하지 않은 독립된 파일로 존재하는 클래스를 HTML파일에 포함시켜야 하는 경우가 발생한다. 즉 Student클래스가 ClassRoom클래스를 상속했다면 절대로 ClassRoom클래스 파일이 HTML 파일에 포함돼 있어야 한다.

 

  • 예제를 통해 확인해 보자. 아래 그림은 예제 폴더구조다. 앞서 살펴본 ClassRoom, Student클래스를 활용 동적 클래스로딩이 어떻게 작동되는지 알아보자.

 

 

예제 루트에 src폴더를 만든다. 일반적인 형식이니 따르기로 하자. src폴더 밑에 우리가 만들 어플리케이션 이름으로 폴더를 하나 더 생성한다. 이전 믹스인과 상속을 설명한 예제에서 ClassRoom, Student 두개 코드만 추출해 각기 클래스명으로 js파일을 생성했다.

 

  • inxdex.html파일을 작성하자. 두 개 define된 클래스와 이를 생성하고 실행시키는 app.js 등 총3개 js파일을 포함시켰다.

 

ClassRoom 클래스와 Student클래스는 앞서 설명한 내용과 동일하다. 단 이 2개 클래스를 생성하여 실행하는 방법을 설명하려 한다.

아래 코드는 동적로딩을 사용하지 않고 html파일에 필요한 js파일들이 포함돼 있어 정상적으로 실행된다.

// 이하 app.js

Ext.onReady(function() {

    

    var student = Ext.create('RiaApp.Student',{

        title : 'Hello Student !!',

        html : '안녕하세요 여러분',

        grade : '2',

        className : '꾸러기',

        teacher : '홍길동',

        studentName : '김철수',

        studentAddress : '경기도 고양시 일산',

        renderTo : document.body

    });

    console.log(student.getStudent()); // Step6

});

 

  • 아래 그림은 위의 코드를 실행한 결과다.

  • 이제 동적클래스 로딩을 테스트 하기 위해 index.html파일 내부 ClassRoom.js와 Student.js파일을 주석 처리하고 app.js내 Ext.onReady전에 아래처럼 Ext.Loader를 설정한다.

// Configure the Ext.Loader class

Ext.Loader.setConfig({

    enabled : true,     // Step1

    paths : {        // Step2

        'RiaApp' : 'src/RiaApp'

    }

});

Ext.require('RiaApp.Student'); // Step3

Ext.onReady(function() {

..

 

Step1 : Ext.Loader를 사용할 수 있게 활성화 한다.

Step2 : src폴더를 RiaApp라는 이름으로 경로를 잡아준다. src폴더에는 'RiaApp.'으로 시작하는 클래스가 위치한다.

Step3 : Ext.require함수에 동적로딩 할 클래스를 명시한다.

 

  • 브라우저를 통해 실행한다. 이전과 동일하게 실행된다. Index.html파일 내부에 두 개 클래스 파일이 주석으로 제거된 상태에도 이전과 같이 정상적인 결과를 보여준다. 위의 코드로 인해 내부적으로 어떤 일이 생겼는지 확인해 보자. 아래 그림은 인스펙터 Element탭에서 최종 실행 된 html 결과다. 

그림을 자세히 보면 ClassRoom.js와 Student.js는 주석처리 됐고 app.js하단에 다시 ClassRoom.js와 Student.js가 링크된 것이 보인다. 왜 일까? 주석으로 막힌 두개의 js파일은 앞서 우리가 주석 처리한 코드이고 app.js하단 두개의 js파일은 Ext.Loader 설정에 의해 자동으로 생성됐다. 즉 Ext.Loader를 설정하고 Ext.require('RiaApp.Student')를 통해 동적로딩할 클래스를 명시했기 때문에 자동으로 Student.js파일 링크가 생성됐다. 그런데 우리가 필요하다고 설정한 클래스는 RiaApp.Student클래스 하나로 ClassRoom.js은 왜 있는 것일까?

 

이는 ExtJS 클래스 시스템이 RiaApp.Student클래스를 실행하기 위해 필수적으로 필요한 클래스가 무엇인지 파악한 후 필요한 클래스도 같이 로딩하기 때문이다.

 

이처럼 동적클래스 로딩은 특정 폴더를 경로로 설정해 폴더내부 클래스 파일을 Ext.require를 통해 로딩해줘 html파일에 수작업으로 js파일을 링크하지 않는다.

이는 개발단계에서 특정 라이브러리를 포함하거나 그외 어플리케이션 클래스를 사용할 경우 유용하다.

 

  • 좀더 알아보자. 아래 처럼 Ext.require를 주석처리하고 실행한다.

//Ext.require('RiaApp.Student');

이전과 달리 콘솔창 상단에 경고메시지가 출력된다. 메시지 내용은 Ext.onReady상단에 Ext.require('RiaApp.Student')를 추가하라는 내용이다. 경고를 보였을 뿐 정상적으로 프로그램은 실행됐다. 다시 인스펙터 Element탭을 보자. 이전과 달라진 점이 무엇인지 아래 그림을 통해 확인하자.

 

이전과 달리 app.js하단에 ClassRoom.js와 Student.js 파일 링크가 없어졌다. 이는 Ext.require를 주석 처리해 링크가 사라진 것이다.

그렇다면 왜 프로그램은 정상적으로 실행됐을까?

 

  • 이유는 실행 코드에 있다. 우리는 Ext.Loader를 통해 RiaApp이하 클래스 폴더가 어디 있는지 설정해 줬다.

Ext.Loader.setConfig({

    enabled : true,

    paths : {

        'RiaApp' : 'src/RiaApp'

    }

});


  • 이후 이 예제를 실행하기 위해 Ext.create를 사용했다. 즉 아래처럼 클래스 풀네임을 쓰고 생성할 경우 이미 RiaApp클래스 폴더 경로(src/RiaApp)가 존재해 RiaApp.Student로 생성해도 Student클래스에 직접 접근 가능하다.

var student = Ext.create('RiaApp.Student',{ // src/RiaApp폴더에 접근 가능

    title : 'Hello Student !!',

    …

    renderTo : document.body

});

 

Alias (xtype)

이렇게 실행에 문제가 없다면 왜 경고를 보여주는 것일까? Ext.create는 단일 클래스를 생성하는 코드로는 적합하나 여러 개 클래스를 하나의 클래스 자식으로 포함 할 경우에는 부적합하다. 이 경우 변수를 통해서 자식을 추가하기 보다는 클래스에 alias를 설정해 부모가 될 클래스 xtype속성으로 사용하는 것을 권장한다.

 

  • Student클래스에 alias를 'widget.student'로 지정하자. 'widget.'이후 student가 위젯명으로 사용된다.

Ext.define('RiaApp.Student', {

extend : 'Ext.panel.Panel',

      alias : 'widget.student',

 

  • Ext.create를 통한 실행코드를 위의 alias로 변경해 본다. 아래 코드는 Ext.Viewport를 생성하고 Student클래스를 alias명으로 Ext.Viewport item으로 추가하는 코드다.

    // Step1

    Ext.create('Ext.Viewport',{

        items : [{

            // xtype 을 이용해 컴포넌트를 배치한다.

            // 여기서는 정확히 require가 돼 있어야 한다.

            // xtype으로는 상단경로와 함께 클래스를 찾지 못한다.

            xtype : 'student',        // Step2

            title : 'Hello Student !!',

            html : '안녕하세요 여러분',

            grade : '2',

            className : '꾸러기',

            teacher : '홍길동',

            studentName : '김철수',

            studentAddress : '경기도 고양시 일산'

        }]

    });

 

Step1 : Ext.Viewport는 브라우저에 유일하게 하나만 존재하는 최상위 객체다.

Step2 : Ext.Viewport 자식으로 추가한다. xtype속성에 Student클래스 alias명을 넣는다.

기존 Ext.create 내부 코드를 Ext.Viewport 내부 items 코드안으로 그대로 가져왔다.

 

  • 아래 그림은 위의 코드를 실행한 결과다.

실행 결과 'widget.student'를 인식하지 못한다. 이는 alias로 사용한 위젯명이 클래스명 처럼 '.'을 통해 폴더명을 포함하지 않고 'student'로 함축적으로 사용했기 때문에 widget.student인 Student클래스를 못찾는다. 이때 필요한 것이 Ext.require('RiaApp.Student') 코드다. 이전에 주석처리 했으므로 주석을 없애고 다시 실행하면 정상적으로 동작한다.

이처럼 widget형태로 간략히 쓰기 위해서는 Ext.require를 통해 필요한 클래스가 미리 로딩돼야 한다..


section2.zip


 

Posted by 1 베니94

댓글을 달아 주세요

  1. rhyun

    ExtJS4를 공부하면서 상세한 설명이 부족해 이해도 못하고 쓰라고 하니까 그냥 쓰고 있었는데
    이 글을 보니 이제야 이해가 되네요ㅠㅠ
    이렇게 좋은 글을 써주셔서 너무 감사합니다!! 글보고 많이 배우고 갑니다~^^

    2013.11.19 09:47 [ ADDR : EDIT/ DEL : REPLY ]
  2. 김영균

    감사합니다. 공부하는데 많은 도움이 되었습니다.
    센차터치 공부하다 보니 여기까지 왔네요^^

    2013.11.30 03:23 [ ADDR : EDIT/ DEL : REPLY ]
  3. 이현석

    제가 ExtJS4에 이제 입문(?) 했는데,
    우연히 베니님 블로그에 오게 되었습니다.
    정말 친절하고 자세히 잘 나와있네요 .
    많은 도움 되고 있습니다. 정말 감사합니다. 그리고 사랑합니다.

    2014.02.28 19:48 [ ADDR : EDIT/ DEL : REPLY ]
  4. 급하게 개발을 해야해서 공부중인데... 우연히 알게 되서 들어오게됬는데 정말 정리를 잘 해주셔서서 도움이 많이 됐습니다. 정말 감사합니다 :-) 요즘 매일 여기 들어와서 공부하는게 일입니다 ㅎㅎ
    제 블로그에 퍼가고 싶어요~~ 일단 주소만이라도 퍼가겠습니다 ^^

    2014.10.24 11:11 [ ADDR : EDIT/ DEL : REPLY ]