정보공간_1

[6기 부산 심현정] Ext JS4 파헤치기 #3 본문

IT 놀이터/Elite Member Tech & Talk

[6기 부산 심현정] Ext JS4 파헤치기 #3

알 수 없는 사용자 2014. 11. 26. 02:58


[Ext JS4 파헤치기 #3 MVC패턴 이해하기]




 이번 시간에는 Ext JS4의 가장 큰 장점인 MVC 패턴을 이용하여 화면을 구성해 보겠습니다. 앞에서 설명했듯이 MVC 패턴은 구조화를 통해 코드 이해도가 증가하며 유지보수에 편리해지고 버그 발생시 쉽게 찾아내고 제거할 수 있습니다.


간단한 grid  panel을 MVC 패턴을 이용하여 만들어보겠습니다. 




1. view 구성


화면을 구성하는 view를 정의한 코드입니다.


Ext.define('Test.view.StudentGrid', {

extend: 'Ext.grid.Panel',

title : 'Student Information',

alias : 'widget.StudentGrid',

columns : [{

text : 'No.',

width: 30,

dataIndex: 'num'

},{

text : 'Name',

flex : 1,

dataIndex: 'name'

},{

text : 'University',

flex : 1,

dataIndex: 'univ'

},{

text : 'Grade',

flex : 1,

dataIndex: 'grade'

}]

});


grid 컴포넌트를 구현하기 위해 'Ext.grid.Panel' 을 extend로 상속받습니다. 

columns를 통해 grid 패널의 field를 정의할 수 있습니다.



- text : field의 이름으로 표현되는 부분.

- flex : 상대적인 간격입니다. / width를 통해 고정 간격을 줄 수도 있습니다.

- dataIndex : field의 데이터 타입을 의미합니다. store의 data와 매치됩니다.




2. model 구성


model은 store의 데이터를 구성하는 field들의 모음을 정의한 코드입니다.


Ext.define('Test.model.GridModel', {

extend : 'Ext.data.Model',

fields: [{name : 'num', type: 'string'},

{name : 'name', type: 'string'},

{name : 'univ', type: 'string'},

{name : 'grade',type: 'string'}],

});


view는 store라는 데이터를 가지며 이 데이터가 어떻게 구성되어 있는가를 정의한 것이 모델이라 할 수 있습니다.

field를 통해 데이터가 어떻게 구성되어 있는가를 정의할 수 있습니다.




3. store 구성


view 에 사용되는 데이터가 되는 store를 정의한 코드입니다.


Ext.define('Test.store.StudentStore', {

  extend: 'Ext.data.Store',

model : 'Test.model.GridModel',

proxy : {

type: 'memory',

reader : {

type : 'json',

}

}

});


store는 model과 proxy만 정의하면 쉽게 만들 수 있습니다.

proxy는 모델 데이터를 불러오거나 저장하는 것을 어떻게 핸들링 할 것인가를 정의합니다.

type : 'memory' - 메모리에서 데이터를 가져온다. 즉 프로그램으로 만들어진 데이터를 불러올 경우 이렇게 쓴다.

   'ajax'       - 파일을 불러와 데이터를 가져올 때 사용된다.




4. controller 구성


컴포넌트를 제어하는 controller 입니다.


Ext.define('Test.controller.StudentController', {

extend : 'Ext.app.Controller',


init : function () {

this.control({

'#studentInfo-grid' : {        //grid panel의 id

afterrender : this.setGridData

}

});

},

setGridData : function(value, metaData, record, row, col, store, gridView){

var grid = Ext.getCmp('studentInfo-grid'),

objArr = new Array();


var data = [{num: '1', name: 'kim', univ: 'pusan', grade: '4'},

{num: '2', name: 'park', univ: 'seoul', grade: '3'},

{num: '3', name: 'lee', univ: 'incheon', grade: '1'},

{num: '4', name: 'kim', univ: 'daegu', grade: '3'}];


var store = Ext.create('Test.store.StudentStore',{

data : data

});


grid.reconfigure(store);

}

});


init()함수의 this.control에서 이벤트를 등록할 수 있습니다.

afterrender는 컴포넌트가 렌더링 된 후 실행되는 이벤트를 설정할 수 있습니다. 저는 setGridData 내부함수를 호출하였습니다.

setGridData 함수는 grid 패널의 store를 추가하는 함수입니다.

store에 들어가는 object 배열은 model에서 정의한 형태로 표현해야 하며, view 컴포넌트 column의 dataIndex와 일치해야 합니다.




5. 그 외


  5.1.  Application.js


Ext.define('Test.Application', {

    extend: 'Ext.app.Application',

    name: 'Test',

    views: [

        'Test.view.StudentGrid',

    ],


    controllers: [

        'StudentController',

    ],


    stores: [

        'Test.store.StudentStore'

    ]

});


application.js에 실행할 controller와 view, store를 등록합니다.



  5.2.  Viewport.js


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

    extend: 'Ext.container.Viewport',

    requires:[

        'Ext.layout.container.Fit',

    ],


    layout: {

        type: 'fit'

    },


    items: [{

        xtype: 'StudentGrid',

        id : 'studentInfo-grid'

    }]

});



viewport는 <body>를 만들며, 웹 페이지를 구성하는 UI를 의미합니다.

viewport의 item을 통해 방금 정의한 view를 호출하도록 하였습니다. id를 정의함으로써 controller에서 StudentGrid 컴포넌트를 접근할 수 있습니다. (controller 소스 참조)




6. 결과


완성된 컴포넌트는 아래의 그림과 같습니다.










'IT 놀이터 > Elite Member Tech & Talk' 카테고리의 다른 글

[6기 수원 최웅엽] WebGL 애니메이션과 셰이더  (0) 2014.11.26
[6기 대구 류지현] FileSystem Minifilter Driver #1  (0) 2014.11.26
[6기 대전 민창기] Control System #6  (0) 2014.11.25
[6기 대전 민창기] Control System #5  (0) 2014.11.25
[6기 강북 이보희] C++로 만든 DLL을 C#에서 사용하기  (0) 2014.11.24
'IT 놀이터/Elite Member Tech & Talk' Related Articles more