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

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

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

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

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

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

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

// 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