[ExtJS 3.0] Toolbar Buttons Group Ribbon Style

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

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

실제 사용 예제 (fbar 의 속성으로 배열에 텍스트 요소하나만 넣으면 됩니다.)

<br/> new Ext.ButtonGroup({<br/> cls: 'x-btn-group-ribbonstyle',<br/> fbar: ['YourTitleHere']<br/>});<br/>



CSS 를 보시면 assets/images/group-bt.gif 가 필요합니다.

아래의 주소에서 구하시면 될 것 같습니다. (이미지의 위치에 따라 CSS도 변경해주셔야 하는 거 잊지마시구요...)


http://js.curlybracket.de/examples/buttongroup-ribbonstyle/group-bt.gif




실제로 개발자 분의

예제 페이지

를 보면 아래처럼 나오게 됩니다.

이로서 한걸음 더 오피스와 가까워지는 ExtJS 를 보셨습니다. ㅋㅋㅋ

메뉴랑 연동이 되는 툴바도 나왔으면 좋겠네요~