ExtJS를 활용한 Ria 어플리케이션 구축하기 - 2

이제 본격적으로 코딩을 해봅니다.

아래 그림은 최종 구현된 모습을 보여주고 있습니다.
실제 프로젝트에서는 항상 권한과 각기 다른 프로그램들을 디비설정에 의해 추가하고
삭제할 수 있어야 합니다.

이제 ExtJS 코딩에 들어가겠습니다. 모든 코딩은 mvc모델을 준수합니다. 아래 처럼 폴더구조를 만들고 시작하겠습니다.
war폴더 밑에 app.js파일 , model, view, controller폴더를 생성합니다.

이제 app.js를 코딩해서 틀을 잡습니다.

?

1 2 3 4 5 6 7 8 9

Ext.application({     name: 'ria',    // 어플리케이션 명     appFolder : '/app', // 어플리케이션 폴더     // 실행시 사용할 모든 컨트롤러를 명시한다.     controllers: [         'FrameController' // 어플리케이션이 사용할 컨트롤러     ],        autoCreateViewport: true });

이제 뷰포트와 위에서 명시한 컨트롤러를 코딩합니다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

// app/view/Viewport.js Ext.define('ria.view.Viewport', {     extend: 'Ext.container.Viewport',     layout : 'border',     items: [     {         region: 'center',         xtype: 'panel',         title : '중간'     },{         region: 'west',         xtype : 'panel',         width: 200,         title : '좌측'     }] }); // app/controller/FrameController.js Ext.define('ria.controller.FrameController', {     extend: 'Ext.app.Controller',           init: function() {         this.control({                       });     } });   // smpl/index.html파일을 수정해서 war밑에 main.html로 추가하자. < html> < head>     < meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     < title id="page-title">샘플     < link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">     < script type="text/javascript" src="/extjs/ext-debug.js">     < script type="text/javascript" src="app.js"> < /head> < body>   < /body> < /html>

 

ExtJS 포럼 http://benney.able.or.kr/forum