프론트엔드개발
2월 21일 WID : TabPanel 내용 보강, 업무적/개인적 todo list 작성
TabPanel의 itemRender와 itemComponent오늘은 데브익스트림의 TabPanel에서 사용할 수 있는 prop중 itemRender와 itemComponent의 작동방법을 비교했다. itemRender탭이 바뀔때마다 하나의 패널에 내용을 바꾸어 렌더링한다. 탭이 여러개여도 렌더링된 패널은 한개 뿐이다.tabPanel에 주입된 dataSource를 곧바로 받아오지 못한다. 메소드의 params로 넘겨준 값이나 렌더링할 컴포넌트에 주입한 props만 받아서 사용할 수 있다. itemComponent탭마다 패널을 렌더링해두고 탭을 선택할 때마다 디스플레이 속성을 통해 탭에 해당하는 패널을 노출해준다. 개발자도구에서 엘리먼트를 추적해보면 탭 개수대로 html요소가 준비되어있음을 알 수 있다.t..
2월 20일 WID : Devextreme의 TabPanel을 정복하다!
우리 회사에서는 UI 라이브러리로 devextreme이라는 라이브러리를 사용한다. 이번에는 팝업 안에서 Tab 메뉴를 이동하는 동시에, 각 개별 Tab메뉴 내에서 TreeView를 활용하여 selectedItems를 받아야 하는 업무가 주어졌다. 어려웠던 점 최초 팝업 오픈 시 NavButtons 미노출되는 현상 TabPanel에서는 showNavButtons라는 옵션으로 탭메뉴가 많아지고 길어졌을 때 좌우 이동 버튼을 제공하는데, 팝업에서 띄워서 그런지 최초 팝업 노출시 NavButtons의 노출 조건에 맞지 않아 최초 팝업 오픈 시 탭메뉴가 오른쪽으로 쭉 삐져나오는 현상을 겪었다. showNavButtons Specifies whether navigation buttons should be avail..