ExtJS 기초강좌 8 - 패널 타이틀 위치 및 툴바 다뤄보기
이전 강좌에서 진행한 기본패널코드를 이용하여 타이틀의 위치변경과 툴바 생성 및 포지션 변경에 대해서 알아보도록 하겠습니다.
위치 변경 역시 Configs 속성값 하나만 추가해주시면 타이틀을 원하는 위치에 놓을 수 있습니다.
패널 타이틀의 위치변경에 대한 속성은 "headerPosition" 입니다.
해당 Configs에 지정해줄수 있는 value값은 다음과 같습니다.
headerPosition : 'top' or 'bottom' or 'left' or 'right'
선언하지 않을 시, default 'top'이 지정됩니다.
각 포지션별 위치를 한 화면에 확인을 하기 위하여 기존의 body태그에 renderTo를 적용해주었으나, 이번에는 4개의 패널을 한번에 출력시키기위하여 div태그 4개를 작성하고 각 태그들의 ID값을 이용하여 렌더링을 시켜보았습니다.
1. position별 타이틀 위치
▶ 샘플코드
▶ 실행결과
위와같이 각 div 영역에 타이틀 위치별로 패널이 생성되었습니다.
별도로 margin 속성을 주었는데 이부분은 단순히 각 패널들의 간격을 주고자 한것이니 삭제하셔도 무관합니다.
2. 툴바 알아보기
위와같이 도구모음의 영역을 툴바라 하는데, ExtJS에서 이 툴바를 생성하여 툴바에 버튼 및 메뉴버튼등의 컴포넌트를 생성 할수 있습니다.
간단하게 툴바를 생성해본 후, 3가지 버튼을 추가 해보도록 하겠습니다.
▶샘플코드
▶실행결과
타이틀 하단에 툴바가 생성되었습니다.
하지만, 코드를 보면, panel의 items 속성이 아닌 dockedItems 속성의 xtype이 'toolbar' 를 주고 툴바의 items 속성으로 버튼들을 생성하였습니다.
툴바는 고정적인 항목이므로 dockedItem을 쓰시고, 그외의 패널바디에 들어가게되는 컴포넌트들은 items 항목에 추가해주시면 되겠습니다.
3. 툴바위치변경
툴바역시 타이틀처럼 configs 속성값 하나로 위치변경이 가능합니다.
위치를 변경하기 위한 속성은 dock이라는 속성이 되겠으며, value값은 위에서 작성한 headerPosition의 value값과 동일합니다.
dock : 'top' or 'bottom' or 'left' or 'right'
타이틀 위치변경과 동일하게 4개의 div 영역을 나누고 각 위치별로 출력을 시켜보도록 하겠습니다.
▶ 샘플코드
▶ 실행결과
dock Configs를 이용하니 툴바역시 위치별로 깔끔하게 출력되는군요.
패널에서 dockedItems를 이용해보니, 내부에 xtype : 'toolbar'를 생성해주고 items 속성을 추가하여 버튼을 생성하게끔 코드를 작성하니 3depth가 되고있습니다.
위와 동일한 결과를 2depth를 이용하여 나타낼 수 있습니다.
dockedItems대신 다음 configs 를 이용하면 되겠습니다.
bbar / fbar / lbar / rbar / tbar
위 configs를 이용해주면 xtype : 'toolbar' + dock : value를 하지 않고도 툴바생성이 가능해집니다.
기존에는 4개의 position이 있었는데 'X'bar에 해당되는 갯수는 5개가 있군요.
무엇인지 몰라도 div태그를 5개로 하고 각 configs들을 이용하여 툴바를 생성해보도록 하겠습니다.
▶ 샘플코드
▶ 실행결과
'X'bar 를 이용한 결과 fbar를 제외한 나머지는 dock 속성을 준것과 동일한 결과가나왔습니다.
fbar는 버튼의 우측정렬 및 배경색과 버튼의 색이 다르군요.
대신 'X'bar Configs를 이용하게 되면 depth가 줄어드니 보기좋습니다.
본인은 툴바생성시, dockedItems보다는 'X'bar를 권유하고 싶습니다.
지금까지 ExtJS 패널 타이틀의 위치변경과 툴바 생성 및 위치변경을 다루어보았습니다.
