지난 포스팅에 간단하게나마 버튼 컴포넌트를 툴바에 생성하여
클릭이벤트 발생시키는 방법까지 알아보았습니다.
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 개발로짜
ExtJS 강좌 - 버튼클릭으로 윈도우 모달창 띄워보기 (2) | 2014.10.24 |
---|---|
ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
ExtJS 강좌 - 툴바위치 및 버튼 클릭 이벤트 알아보기 (0) | 2014.10.21 |
ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox) (0) | 2014.10.20 |
ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Absolute,Accordion,Border) (2) | 2014.10.20 |
스크롤스파이는 보통 "one page content"에 사용되는 기능입니다.
스크롤을 내릴때마다 타이틀 영역이 변경되면
네비게이션메뉴의 포커스가
자동으로 이동되는 기능을 의미합니다.
간단하게 메뉴별 컨텐츠내용을 기준으로 코드를 작성 해보도록 하겠습니다.
스크롤스파이를 구현하는방법은
HTML 태그의 속성값을 지정해주는 방법과
자바스크립트를 이용한 방법 2가지가 존재합니다.
먼저 HTML 태그 속성값을 이용하여 스크롤스파이기능을 만들어 보도록 하겠습니다.
<nav id="menubar" class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <a class="navbar-brand" href="#">스크롤스파이테스트</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#blog_intro">블로그소개</a></li> <li><a href="#writer_intro">작성자소개</a></li> </ul> </div> </nav> <div style="margin-top: 100px;"> <h4 id="blog_intro"><strong>블로그소개</strong></h4> <p> IT Storage라는 블로그를 소개합니다.<br/> 10월초에 생성하였으며 구글링을 통한 혹은 프로젝트를 진행하면서<br/> 자주사용되는 코드를 게시를 하고자 개설을 하게되었습니다.<br/> front-end 관련 강좌도 야금야금 진행하고있으니<br/> 자주 방문해주시면 감사하겠습니다 ^^<br/> 실시간 포스팅 글을 구독하고자 하시는 분들께서는<br/> 우측 사이드바에 존재하는 네이버 이웃추가를 통하시면<br/> 네이버 로그인시 구독란에서 저의 실시간으로 등록된 글을 확인하실 수 있습니다.<br/> 남은 포스팅 글들이 아직도 한참 남아서 언제 이글들을 모두 채울까 걱정이네요 ;;<br/> 신규 포스팅 주제글들도 있긴한대 이부분은 저도 공부를 하고 이해를 하면서 포스팅을<br/> 진행할 예정이랍니다 ㅋㅋ<br/> 많이 방문해주세요 </p> <h4 id="writer_intro"><strong>작성자소개</strong></h4> <p> 저는 "개발로짜"라는 닉넴을 가지고 블로그 활동을 하는 IT 블로거입니다.<br/> 전문 블로거분들처럼 자세한 내용및 블로그를 꾸미는 방법에 대해서는 미흡하나<br/> 최대한 시간을 내서 제가 알고 있는 지식선에서 문의주신 질문에 대하여 답변을 드리도록 노력하고있습니다.<br/> 항상 열심히 노력하며 발전해나가는 개발자고 되고싶어하는 개발로짜였습니다!! </p> </div>
위 코드에서 추가 <body> 태그에 다음과 같이 속성들을 추가해줍니다.
<body data-spy="scroll" data-target="#menubar">
네비게이션 바에 스크롤 스파이 기능을 넣고자 하는 태그에 data-spy="scroll" 이란 속성을 추가하는겁니다.
추가로 data-spy를 적용한 태그에 data-target="#네비게이션아이디" 혹은 data-target=".클래스" 속성을 추가해줍니다.
위 예제는 화면이 커지면 스크롤 스파이 테스트를 할수 없으므로 브라우저 높이를 줄여서 테스트를 진행합니다.
최초에는 블로그소개에 메뉴바에서 스크롤을 내리니
작성자내용으로 메뉴포커스가 이동되었습니다.
추가로 jquery 를이용하여 스크롤스파이를 구현해보도록 하겠습니다.
기존 <body>태그에 속성값 2가지를 추가 하셨을겁니다.
이 추가했던 부분들을 삭제한다음 스크립트 코드를 다음과 같이 작성을 해주십니다.
$(function(){ $('body').scrollspy({ target: '#menubar' }) })
위처럼 스크립트코드를 추가하면 일반 태그 속성 적용했을때와 동일한 기능이 동작됩니다.
by 개발로짜
부트스트랩 7장 - 탭기능을 적용하여 내용의 가독성 높이기 (0) | 2014.10.24 |
---|---|
부트스트랩 5장 - 부트스트랩의 모달창(기본 + ajax) 알아보기 (7) | 2014.10.16 |
부트스트랩 4장 - 부트스트랩을 이용하여 드롭다운 메뉴 생성하기 (2) | 2014.10.14 |
부트스트랩 3장 - 다양한 버튼 컴포넌트를 만들어보자 (그룹버튼 편) (0) | 2014.10.09 |
부트스트랩 2장 - 다양한 버튼 컴포넌트를 만들어보자 (색상 및 크기 편) (0) | 2014.10.08 |
ExtJS 기준 패널과 같은 도화지 역할을 하는 껍데기에 상하좌우 모든 위치에 툴바적용이 가능합니다.
이번 포스팅은 패널에 툴바를 위치별로 생성하는 법을 알아보고 추가로 생성된 툴바에 자주 사용되는
버튼들을 생성해본 후 클릭이벤트를 적용해보도록 하겠습니다.
패널 도화지를 만드는 방법은 레이아웃만들 때 다루어 보았습니다.
panel에 툴바를 만드는 속성은 tbar/lbar/rbar/fbar/bbar속성을 이용하면 쉽게 위치별로 만드는것이 가능합니다.
추가로 dockedItems라는 속성으로도 툴바생성이 가능합니다.
ExtJS사이트의 샘플에서는 dockedItems를 주로 사용하여 툴바를 만들어줍니다만
이번 포스팅에서는 위의 5가지 속성으로만 툴바를 만들어보도록 하겠습니다.
tbar : tab bar를 의미하며 도화지영역 컨텐츠 내용 상단에 위치
lbar : left bar를 의미하며 도화지영역 컨텐츠 내용 좌측에 위치
rbar : right bar를 의미하며 도화지영역 컨텐츠 내용 우측에 위치
bbar : bottom bar를 의미하며 도화지영역 컨텐츠 내용 하단에 위치
fbar : footer barf를 의미하며 bbar와 동일한 위치인 하단에 놓이지만 툴바의 배경 및 UI가 다릅니다.
다음 코드를 보시겠습니다.
Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ //도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다) renderTo : Ext.getBody(), width: 500, height: 400, title : '도화지의 타이틀영역', html : '도화지의 컨텐츠영역', //해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능 bbar : [{ xtype : 'button', text : '버튼1' },{ xtype : 'button', text : '버튼2' }] }); })
하단에 위치시킬 bottom bar속성을 주고 xtype이 button인 컴포넌트 2개를 생성하여 위치시켜 보았습니다.
여기서 xtype은 전에 말씀드렸던것처럼 <input type=""/> 와 비슷한 개념으로
ExtJS만의 html태그라고 생각하시면 되겠습니다.
하단에 bbar 속성이 적용되여 버튼컴포넌트들이 생성이 되었습니다.
상단 코드중 bbar 라는 key값을 lbar/rbar/tbar/fbar 등을 적용하여 각각의 위치 및 결과를 확인하겠습니다.
Crisp 테마 기준으로 bbar와 같은 하단 영역이더라도 fbar버튼이 조금 더 깔끔한거 같네요.
위치별로 생성된 툴바를 알아보았습니다.
json의 key/value를 이용만을 해서 컴포넌트를 생성한다는것이 심플하지 않으신가요??
저...저만 그런가요??;;;
테마별로 툴바의 디자인이 다르니 마음에 드시는 방법으로 작업하시면 되겠습니다.
2014/10/18 - [웹개발강좌/ExtJS] - ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편
다음은 버튼컴포넌트 클릭시 동작하는 클릭이벤트를 알아보겠습니다.
이전포스팅에 Card Layout 예를 들었을때 handler라는 속성을 보셨을 겁니다.
2014/10/20 - [웹개발강좌/ExtJS] - ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox)
보통 이벤트 발생시, listeners라는 속성으로 이벤트 핸들링을 해줍니다.
버튼컴포넌트 역시 이 리스너속성을 지원해주지만
이번장에서는 리스너대신 핸들러속성을 사용하도록 하겠습니다.
리스너의 경우는 추후에 포스팅 하도록 하겠습니다.
버튼컴포넌트에 클릭이벤트를 지원해주는것이 handler입니다.
handler 내에서 이제 json객체를 사용하는것이 아닌 내부적으로 일반 자바스크립트 코드 적용이 가능합니다.
미리 정의한 툴바에 '버튼1'이라는 문구를 가진 컴포넌트에 클릭이벤트를 발생시켜
ExtJS에서 제공하는 ALERT 위젯을 띄워보도록 하겠습니다.
Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ //도화지를 그려놓을 위치(Ext.getBody()의미 : <body>태그내에 그린다) renderTo : Ext.getBody(), width: 500, height: 400, title : '도화지의 타이틀영역', html : '도화지의 컨텐츠영역', //해당 속성의 KEY값만을 변경함으로써 툴바의 위치 변경이 가능 bbar : [{ xtype : 'button', text : '버튼1', handler : function(btn){ Ext.Msg.alert('버튼클릭', '안녕버튼1?'); } },{ xtype : 'button', text : '버튼2' }] }); })
툴바와 버튼 클릭이벤트에 대해서 알아보았습니다.
by 개발로짜
ExtJS 강좌 - 다이얼로그창을 이용하여 깔끔하게 종류별로 메시지창 띄워보기 (4) | 2014.10.23 |
---|---|
ExtJS 강좌 - 메뉴버튼을 포함한 다양한 버튼컴포넌트 구현해보기 (4) | 2014.10.22 |
ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Card,Tab,Fit,HBox/VBox) (0) | 2014.10.20 |
ExtJS 강좌 - 지원해주는 레이아웃 알아보기(Absolute,Accordion,Border) (2) | 2014.10.20 |
ExtJS 강좌 - ExtJS5를 이용한 설치 및 연동하기 편 (0) | 2014.10.18 |