우선 config상에는 해당 기능이 없다.
그럼 어디?
직접 구현해야 한다.
그래서 내가 구현한 방향에 대해서만 설명하려고 한다.
구현하려는 UX는 "Visual Stuido Code" 에디터의 왼쪽 네비게이션 사이드 바 이다.
(다른 탭을 누르면 이동하고 자기자신의 탭을 클릭하면 탭패널이 접힌다.)
- Tab Click 이벤트 핸들러 필요
- Tab Change 이벤트 핸들러 필요
- Tab은 사실상 button 컴포넌트를 확장 시킨 컴포넌트, 그러므로 enableToggle config 사용
위의 3가지 사항은 준비사항.
Tab Click
자기 자신의 탭만 Collapse/Expand 시키는게 포인트. 즉, 현재 탭에서 다른 탭으로 이동 시에는 현재 탭 값만 변경. Collapse/Expand는 너비 값 조정으로 이루어진다.
Tab Change
각 탭이 가지고 있는 하위 패널의 너비를 복원 시켜준다. 원본 너비는 쉽게 구할 수 있음.
너비 값만 주의해서 맞춰주면 끄-읕
더 쉽고 간단한 방법이 있으면 알려주세요!
'Javascript > ExtJS' 카테고리의 다른 글
Dataview 선택이 풀려버리는 증상 (0) | 2018.09.04 |
---|---|
Form Panel 유효성 검사 (0) | 2018.08.21 |
ExtJS에서 scroll 이벤트 잡기 (0) | 2018.08.07 |
ExtJS 객체지향 시스템 (0) | 2018.08.04 |
panel collapse를 화살표 클릭 시에만 동작 하도록! (0) | 2018.08.03 |
댓글