자바스크립트/Ext JS2012. 7. 22. 23:24

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

Posted by 1 베니94

댓글을 달아 주세요

  1. 이준

    다음강좌는 언제잇나요바쁘시더라도 기다립니다.

    2012.10.24 21:26 [ ADDR : EDIT/ DEL : REPLY ]
  2. 신진수

    다음강좌는 언제잇나요바쁘시더라도 기다립니다.

    2012.11.20 13:21 [ ADDR : EDIT/ DEL : REPLY ]
  3. 약속하신땅

    다음 강좌 안해주시나요?

    2012.11.21 22:48 [ ADDR : EDIT/ DEL : REPLY ]
  4. 오늘 드디어 강좌를 업데이트 했습니다.
    프로젝트 끝나서 정신 좀 차리고 여유 좀 챙기나 했습니다만.
    또 프로젝트에 과제에 옆팀도움요청에 정신 못차리고 있어 많이 늦었습니다.
    보시고 문의사항은 댓글이나 메일 주시면 답장하겠습니다.

    2012.11.30 18:00 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 태준

    감사히 잘 보구있습니다.^^

    2012.12.10 09:27 [ ADDR : EDIT/ DEL : REPLY ]
  6. 정봉수

    지금 강좌를 보며 ExtJS 를 따라 해보고 있는 중에 안되는 부분이 있어 질문을 드립니다.
    현재 사용버전은 ExtJS-4.1.1a-gpl 버전이구요.
    accodion 에 menu 붙이는 부분에서
    ...
    menu.add(...)
    ...

    위 부분의 menu.add 에서 "Uncaught TypeError: Cannot call method 'add' of undefined " 라고 에러가 걸리네요.

    var menu = this.getWestMenu(); <== 이부분이 제대로 실행이 안되는 듯 합니다.

    제가 ExtJS 는 처음이라 어디서부터 찾아야 될지 몰라서, 이렇게 글을 남기게 되었습니다.

    감사합니다.

    2013.01.10 15:55 [ ADDR : EDIT/ DEL : REPLY ]
    • this.getWestMenu();는 아래와 같이 ref가 명시되어 있어야 가능합니다.
      확인 해보시고 그래도 안되시면 소스를 보내주세요 확인해보겟습니다.

      {ref: 'westMenu', selector: 'WestMenuPanel'}

      2013.01.14 20:01 신고 [ ADDR : EDIT/ DEL ]
  7. 해다리

    안녕하세요~ 강좌 잘 보고있습니다.
    제가 extJS 왕초보인데 똑같이 따라해도 같은 결과가 안나오네요 ㅜ_ㅜ
    FrameController.js 마지막 부분에 </p>에 빨간줄이 그어지면서 신텍스 에러가 발생하구요...
    </p>를 지우고 실행하면 첫번쨰 그림처럼만 나타나고 패널이 추가가 안되네요 ㅠ.ㅠ...왜 일 까요?

    2013.03.22 15:52 [ ADDR : EDIT/ DEL : REPLY ]
    • 낭군이

      이거 해결하셨나요? 같은 현상입니다~~

      2014.05.30 15:46 [ ADDR : EDIT/ DEL ]
  8. 오마이레그

    안녕하세요 강좌 잘 보고 있습니다

    저도

    onLaunch: function() {
    // refs의 ref명으로 뷰를 찾아온다.
    var menu = this.getWestMenu();
    menu.add({
    xtype : 'WestMenuDataViewPanel',
    title:'사용자관리'
    });
    console.log(menu);
    }

    이 부분이 정상적으로 작동하지 않는 것 같네요

    자꾸 Uncaught TypeError: Object #<Object> has no method 'show' 라는 오류가 뜹니다

    혹시 원인이나 해결방법을 아신다면 알려주셨으면 합니다. 감사합니다

    2013.04.09 11:43 [ ADDR : EDIT/ DEL : REPLY ]
  9. 비에스

    저도 윗분들고 같은 아래의 에러가 출력됩니다.

    버전:ExtJS 4.0.7
    Uncaught TypeError: Object #<Object> has no method 'show'

    확인부탁드릴게요^^
    강좌 잘 보고 있습니다.

    // 2013/04/12 추가사항
    app/view/frame/WestMenuDataViewPanel.js
    에서
    // header: {
    // toolFirst: true
    // }
    위의 부분을 일단 무효처리했더니 화면은 제대로 출력됩니다.
    헤더처리부분이 원인이 아닐지 생각됩니다.(기초가 없어 뭐라고 더 할 할말이 없습니다만...ㅎㅎ;)
    그럼, 다음분들 릴레이 답변 부탁드립니다.^^

    2013.04.12 14:46 [ ADDR : EDIT/ DEL : REPLY ]
    • 소스를 압축해서 메일로 좀 보내주시면
      원인파악해서 알려드릴께요.
      benneykwag@gmail.com입니다.

      2013.04.19 10:51 신고 [ ADDR : EDIT/ DEL ]
  10. 제니

    베니님 안녕하세요

    alias : 'widget.WestMenuPanel',

    에서 alias는 무슨기능을 하나요? 그리고 widget.WestMenuPanel은 왜 지정해 주는 것인지 궁금합니다!

    2014.01.10 07:40 [ ADDR : EDIT/ DEL : REPLY ]
    • 아래 제 블로그의 클래스에 대한 강좌를 보시면 답이 보일겁니다.
      http://benney.tistory.com/148
      (위젯과 동적로딩이 관련된 내용입니다.)

      2014.01.10 09:28 신고 [ ADDR : EDIT/ DEL ]
    • 제니

      감사합니다 ^^

      2014.01.11 07:21 [ ADDR : EDIT/ DEL ]
  11. 제니

    안녕하세요 베니님
    계속해서 질문을 올려 죄송합니다 ㅠ
    다름이 아니라
    refs: [
    {ref: 'WestMenu', selector: 'WestMenuPanel'}
    ],

    이부분에서 refs란 메소드가 정의된 것이 WestMenuPanel안에 WestMenuDataViewPanel의 컴포넌트를 집어넣기 위해서 정의된 것인가요?

    var menu = this.getWestMenu(); refs에 정의된 것들은 자동으로 getter와 setter가 생성된다는 것은 알았는데

    refs가 정확히 어떻게,왜 쓰이는 것인지 궁금합니다.

    늘 감사합니다!

    2014.01.11 09:12 [ ADDR : EDIT/ DEL : REPLY ]