Benney Blog

이제 좌측을 구현하겠습니다.
좌측 패널은 프로그램 메뉴가 나오는 영역입니다.
로그인 한 이후 화면을 코딩하는 것이므로 사용자가 가지고 있는 즉 권한에 해당되는 프로그램들이
보여지게 되면 되겠습니다.
panel을 사용하고 layout은 accodion을 이용합니다.

// app/view/Viewport.js를 수정합니다.
Ext.define('ria.view.Viewport', {
    extend: 'Ext.container.Viewport',
    layout : 'border',
    items: [
    {
		region: 'center',
		xtype: 'panel',
		title : '중간'
	},{
		region: 'west',
		xtype : 'WestMenuPanel',
		width: 200
	}]
});
// app/view/frame/WestMenuPanel.js를 추가합니다.
Ext.define('ria.view.frame.WestMenuPanel',{
	extend 	: 'Ext.panel.Panel',
	alias	: 'widget.WestMenuPanel',
	layout:'accordion',
    collapsible: true,
    margins:'5 0 5 5',
    split:true,
    title : 'Navigation',
    activeItem: 0,
    margins: '5 5 5 5',
    initComponent: function() {
    	
        this.callParent(arguments);
    }
});
// 이제 이 뷰를 사용하려면 컨트롤러에 위의 뷰가 명시되어 있어야합니다.
Ext.define('ria.controller.FrameController', {
    extend: 'Ext.app.Controller',
    views: ['ria.view.frame.WestMenuPanel'], // 꼭 명시되어야함, 명시하지 않을 경우 require를 이용해야합.
	init: function() {
		this.control({
			
		});
    }
});

여기까지 하고 재실행 해보면 크게 바뀐게 없습니다.

이제 좌측 패널의 accodion레이아웃에 맞게 들어갈 패널을 코딩합니다. 이 패널은 dataview를 가지고 있고 이 dataview에
하나의 서브시스템과 해당 서브시스템 아래의 프로그램이 표현되게 됩니다.
그리고 이 패널은 최초 컨트롤러가 로드될 때 WestMenuPanel의 item으로 자동 추가 되게 구현합니다.

// app/view/frame/WestMenuDataViewPanel.js 를 생성한다.
Ext.define('ria.view.frame.WestMenuDataViewPanel',{
    extend: 'Ext.panel.Panel',
    alias: 'widget.WestMenuDataViewPanel',
    animCollapse : true,
    collapsible : true,
    collapsed   : true,
    useArrows: true,
    rootVisible: false,
    store: this.store,
    multiSelect: false,
    initComponent: function() {
        Ext.apply(this, {
            items: [{
            	xtype: 'dataview',
                trackOver: true,
                store: this.store,
                cls: 'feed-list',
                itemSelector: '.feed-list-item',
                overItemCls: 'feed-list-item-hover',
                tpl: '
{pgm_nm}
'
            }],
			header: {
				toolFirst: true
			}
        });

        this.callParent(arguments);
    }
});

// app/controller/FrameController.js 를 수정한다.
// views, refs, onLaunch를 확인하자.
Ext.define('ria.controller.FrameController', {
    extend: 'Ext.app.Controller',
    views: ['ria.view.frame.WestMenuPanel',
            'ria.view.frame.WestMenuDataViewPanel'], // 꼭 명시되어야함, 명시하지 않을 경우 require를 이용해야합.
	refs: [
	        {ref: 'westMenu', selector: 'WestMenuPanel'}
	    ],
	init: function() {
		this.control({
			
		});
    },
    onLaunch: function() {
    	// refs의 ref명으로 뷰를 찾아온다.
    	var menu = this.getWestMenu();
    	menu.add({
    		xtype : 'WestMenuDataViewPanel',
    		title:'사용자관리'
    	});
    	console.log(menu);
    }
});

여기까지 하고 실행해보자.

자 이제 동적으로 accondion layout형태로 panel을 추가한것을 볼 수 있다 . 이제 이 것을 응용해서
디비에서 데이터를 불러와 자신이 가지고 있는 권한에 맞게끔 시스템을 불러오도록 하면 되겠습니다.
우선 디비에서 데이터를 줬다고 생각하고 json형태로 파일을 만들고 먼저 작업하도록 하겠습니다.

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

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

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

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

오늘은 첫번째 시간으로 ExtJS를 이용한 Ria어플리케이션개발에 필요한 준비를 해보도록 하겠습니다.

1. 이클립스
  - 일반적인 자바웹프로그래밍 환경과 별다른 것 없습니다.
     단 Spring을 사용할 것이므로 관련 설정과 파일들이 들어가겠죠.
     일단 최신버전 juno를 받아 사용하도록 하겠습니다.
아래 그림과 같이 프로젝트르 만들겠습니다.

encoding을 맞춰주자 UTF-8

다음은 ExtJS를 다운받고 파일을 카피해 넣도록 하겠습니다.

압축이 풀린 폴더구조는 아래와 같습니다.

이제 아래 폴더 중의 파일들을 정리해서 새로 만든 이클립스 프로젝트에 카피하도록 하겠습니다.
일단 이클립스 프로젝트의 war폴더에 extjs라는 폴더를 만듭니다.
그리고 아래 그림의 압축파일 중 루트에 있는 모든 js파일과 src폴더, resources폴더를 이클립스
프로젝트 war/extjs폴더에 카피한다.

이제 ExtJS로 샘플을 만들고 한번 실행해보겠습니다.
프로젝트의 war폴더에 smpl폴더를 추가하고 아래와 같이 코딩한 후 index.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" >    
    Ext.onReady(function() {
    	var panel = new Ext.create('Ext.panel.Panel',{
    		title : '시작해 볼까',
    		html : 'ExtJS 쓸만해요 ^^',
    		renderTo : Ext.getBody()
    	});
    	
    });
    < /script>
< /head>
< body>

< /body>
< /html>