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

이제 좌측을 구현하겠습니다.
좌측 패널은 프로그램 메뉴가 나오는 영역입니다.
로그인 한 이후 화면을 코딩하는 것이므로 사용자가 가지고 있는 즉 권한에 해당되는 프로그램들이
보여지게 되면 되겠습니다.
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형태로 파일을 만들고 먼저 작업하도록 하겠습니다.