ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기

지난 포스팅에 간단하게나마 버튼 컴포넌트를 툴바에 생성하여 

클릭이벤트 발생시키는 방법까지 알아보았습니다.

2014/10/21 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기

이번에는 다양한 버튼컴포넌트의 종류를 알아보도록 하겠습니다.

이 포스팅에서 위처럼 사이즈별/토글/메뉴/그룹버튼의 종류를 다뤄보도록 하겠습니다.

컴포넌트를 그리기위해서는 도화지가 필요하겠죠? 

패널도화지를 이용하여 각각의 버튼을 생성해보도록 하겠습니다.

사이즈별 버튼 생성하기

패널 도화지에 다음과 같이 사이즈별 버튼컴포넌트를 만들어주는 코드를 작성해보았습니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '사이즈별 버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	text : '기본버튼'
	    },{
	    	xtype : 'button',
	    	text : '중간버튼',
	    	scale : 'medium'
	    },{
	    	xtype : 'button',
	    	text : '큰버튼',
	    	scale : 'large'
	    }]
	});
})

설명전 실행결과를 먼저 보시도록 하겠습니다.

사이즈별 버튼 실행결과

위처럼 3가지 버튼이 출력되었습니다.

원하고자 하는 사이즈별 버튼을 사용하고자 할경우 

scale이라는 속성을 xtype이 'button'과 동일한 레벨에 

작성을 해주시면 되겠습니다.

기본버튼 같은경우는 별다른 사이즈 속성값이 없습니다.

기본버튼보다 큰 사이즈들이 영문처럼 medium(중간), large(크게) 값을 scale 속성에 정의해주시면 되겠습니다.

다음으로는 토글버튼에 대하여 설명드리겠습니다.

토글버튼 생성하기

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '토글버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	enableToggle : true,
	    	text : '토글버튼'
	    }]
	});
})

어? 뭐지? 

기본 xtype이 button인 속성에 enableToggle 값만 추가로 true를 주었네? 

라고 생각하시겠죠? 

맞습니다. 어렵게 생각하실 필요가 없습니다. 

ExtJS는 조립로봇에 비유하고 싶습니다.

조립로봇의 부품들을 띄어서 설명서대로 조립만 하면 되는것처럼 

ExtJS역시 이미 만들어져있어서 속성에 적용만 잘 하면 원하는 이상의 퍼포먼스가 나는 JS프레임웍입니다.

도큐면서 문서보는 방법에 대해서는 

이후 다루도록 하겠습니다.

기본 컴포넌트에 우선 충실해집시다!!

토글버튼 실행결과

메뉴버튼 생성하기

메뉴버튼은 2가지로 구분이 됩니다.

버튼자체를 클릭하여 메뉴목록을 출력시켜주는 메뉴버튼과 

버튼과 메뉴펼침버튼을 나누어 주는 메뉴버튼으로 구분이 됩니다.

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 100,
		title : '메뉴버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'button',
	    	text : '일반메뉴버튼',
	    	menu: [
	    	    {
	    	    	text : '메뉴1'
	    	    },
	    	    {
	    	    	text : '메뉴2'
	    	    }
	        ]
	    },{
	    	xtype : 'splitbutton',
	    	text : '구분자메뉴버튼',
	    	menu: [
	    	    {
	    	    	text : '메뉴1'
	    	    },
	    	    {
	    	    	text : '메뉴2'
	    	    }
	        ]
	    }]
	});
})

메뉴 목록을 출력시키는 부분은 xtype과 동일한 레벨에 menu 속성에 정의를 해주시면 되겠습니다.

메뉴버튼 코드실행 결과

위사진을 보시면 "일반메뉴버튼"은 전체버튼을 클릭시 메뉴가 드롭다운됩니다. 

하지만 "구분자메뉴버튼" 클릭시 나뉘어져있는 아래로표시된 화살표를 클릭해야 메뉴가 드롭다운이 됩니다.

마지막으로 그룹버튼에 대해서 설명을 드리겠습니다.

그룹버튼 생성하기

Ext.onReady(function(){
	Ext.create("Ext.panel.Panel",{
		width : 500,
		height : 200,
		title : '그룹버튼',
		//도화지를 그려놓을 위치(Ext.getBody()의미 : body태그내에 그린다)
		renderTo : Ext.getBody(),
		items : [{
	    	xtype : 'segmentedbutton',
	    	items : [{
	    		text : '첫번째버튼'
	    	},{
	    		text : '두번째버튼'
	    	}]
	    }]
	});
})

그룹버튼 실행결과

xtype이 "segmentedbutton" 속성이 그룹버튼을 만들어 주는 타입 입니다.

그룹버튼은 메뉴버튼 만든것과 비슷한 개념이고 구조만 살~짝 다르답니다

메뉴버튼의 경우는 xtype이 button을 주고 같은 레벨에 menu 속성을 지정해주었지만

그룹버튼의경우 xtype이 segmentedbutton을 주고 items로 child node에 button 목록을 여러개 작성해주었습니다.

세로형 그룹버튼을 원하신다면 xtype : 'segmentedbutton' 와 같은 레벨에 추가로 vertical : true 속성을 지정해주시면 되겠습니다.

지금까지 버튼의 종류들을 알아보았습니다.

기능동작은 언제 알아보나요?라고 궁금해하시는분들을 위해서 말씀드립니다.

ExtJS의 JSON구조로 컴포넌트 생성법이 우선이라 생각되어 기능 동작은 이후에 다루도록 하겠습니다.

컴포넌트가 뭐 별거 있나라고 생각하시겠지만 엄청 중요하답니다.

콤마(,)나 괄호닫기([],{}) 등을 실수로 빼먹거나 누락시킬경우 

ExtJS는 대부분 오류로 인식을 시키기 때문에 

JSON 규격으로 컴포넌트를 만드는 습관은 필수입니다.

다음장에는 메시지창(ALERT,CONFIRM)을 포스팅하도록 하겠습니다.

by 개발로짜