불친절한자수씨

ExtJS 3.0 에서 Toolbar ButtonsGroup 이 새로 추가되었습니다.

(예제 페이지 : https://www.extjs.com/deploy/dev/examples/toolbar/toolbars.html)

하지만 우리가 쓰는 Office 2007 에는 그룹 타이틀이 하단에 위치해 있는 것을 볼 수 있습니다.

그리하여 구글링으로 찾은 결과물이 바로 아래 게시물입니다.
https://www.extjs.com/forum/showthread.php?p=375447

culybracket 이라는 닉네임을 쓰시는 분이 fbar 에 text 로 title 을 작성하고 css 형식을 입히는 방식으로
오피스와 같은 형식의 그룹 버튼 만드는 법을 정리하셨습니다.

CSS
.x-btn-group.x-btn-group-ribbonstyle .x-btn-group-bc { /* Set this path to your environment! */ background-image: url(assets/images/group-bt.gif); } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .xtb-text { color: #3E6AAA; padding: 0; } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer, .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns, .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns td.x-toolbar-cell { padding: 0; } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns-right .x-panel-fbar { float: none; } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left table { margin: 0 auto; } /* FIXES FOR IE: */ .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns.x-panel-btns-right .x-clear { font: 0 sans-serif; } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-footer .x-panel-btns .x-toolbar-left { text-align: center; } .x-btn-group.x-btn-group-ribbonstyle .x-btn-group-tc { vertical-align: top; }

실제 사용 예제 (fbar 의 속성으로 배열에 텍스트 요소하나만 넣으면 됩니다.)
new Ext.ButtonGroup({ cls: 'x-btn-group-ribbonstyle', fbar: ['YourTitleHere'] });


CSS 를 보시면 assets/images/group-bt.gif 가 필요합니다.
아래의 주소에서 구하시면 될 것 같습니다. (이미지의 위치에 따라 CSS도 변경해주셔야 하는 거 잊지마시구요...)
http://js.curlybracket.de/examples/buttongroup-ribbonstyle/group-bt.gif


실제로 개발자 분의 예제 페이지를 보면 아래처럼 나오게 됩니다.

이로서 한걸음 더 오피스와 가까워지는 ExtJS 를 보셨습니다. ㅋㅋㅋ
메뉴랑 연동이 되는 툴바도 나왔으면 좋겠네요~