[ExtJS강좌 17]메뉴바(menu) - 메뉴바 생성하기 [create menu bar]

이번에는 메뉴바를 생성하고자 한다.

뭐 메뉴바는 심플해서 별도로 설명할 부분이 없다....

툴바에 menu라는 속성으로정의를 해주면 메뉴 목록들이 표출이 된다.

우선 컴포넌트 출력이므로 기능구현은 제하고 생성을 하도록 하겠음

현재 설명중인 모든 컴포넌트들을 CRUD 미니프로젝트를 진행할때 한꺼번에 진행하도록 하겠음.

ExtJS를 실행할 세팅이 안되있다면  다음링크를 따라서 준비하자

2014/06/03 - [자바스크립트이야기/Ext JS] - [ExtJS강좌 1] ExtJS 5 개발 준비!! [지겨운 헬로월드로 시작하기....]

준비가 되었다면 다음 코드를 실행하여 보자 

Ext.onReady(function(){
	   Ext.create('Ext.panel.Panel',{
		   title : '메뉴예제',
	       renderTo : Ext.getBody(),
	       tbar : [
	               {
	            	   text: '메뉴1',
	            	   menu: [
	      	            	{
	      	            		text: '메뉴1-1'
	      	            	},
	      	            	{
	      	            		text: '메뉴1-2'
	      	            	}
	      	          ]
	               },
	               {
	            	   text: '메뉴2',
	            	   menu: [
	      	            	{
	      	            		text: '메뉴2-1'
	      	            	},
	      	            	{
	      	            		text: '메뉴2-2'
	      	            	}
	      	          ]
	               }
	       ]
	   })
})

바로 실행화면을 출력해보자

                             

                     (초기화면)                              (메뉴1클릭화면)                     (메뉴2클릭화면)

어떤가 붸리 Simple 하지 않은가~~~  

이벤트 주는것은~~ 

다시 말씀드리면 MVC기반의 CRUD 미니 프로젝트 진행할때 한꺼번에 적용하도록 해보겠다!!! 

도움이 되셨다면 공감클릭! 궁금하신점은 댓글!!