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

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

 

?

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 41

// 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으로 자동 추가 되게 구현합니다.

 

?

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

// 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: '<tpl for="."><div class="feed-list-item {pgm_icon}">{pgm_nm}</div></tpl><p>'             }],             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);     } }); </p>

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

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