ExtJS6 열세번째강의 - ExtJS 6 그리드패널을 이용한 데이터스토어 이해(2) (ExtJS 6 Understanding DataStore With Grid Panel)
▼▼▼ ExtJS 강좌 구독을 원하시면, 아래 채널구독 부탁드립니다 ^^ ▼▼▼
https://www.youtube.com/channel/UCmIEd8PTq5PXJyXlboXKOpQ
그리드패널(Ext.grid.Panel)
그리드란, 화면상의 많은양의 데이터를 시각화하는 훌륭한 방법
그리드를 이용하면 쉽게 정렬 및, 데이터를 출력하고 많은 양의 데이터를 필터링을 할 수 있음
table 태그가 기본바탕이며, 각각의 table, tr, td에 엘리먼트들이 감싸져 있고 클래스들을 정의함
그리드 + 데이터스토어 관계
이전시간 콤보박스의 경우 ,
콤보박스를 데이터스토어와 연결을 시켜주고자 했을 때, displayField와 valueField를 이용했습니다.
기억이 안나신다면, 이전 강좌를 다시 수강해주세요.
콤보박스처럼, 그리드 역시, 속성값을 이용하여 데이터의 fields 속성과 연결을 시켜주어야 합니다.
각 columns 속성의 JSON OBJECT로 이루어진 컬럼의 CONFIG 속성에서 dataIndex라는 속성에 fields에서 정의된 key를 맞춰주면 손쉽게 데이터 출력이 가능합니다.
그리드 컬럼출력
일반적으로 패널생성하듯이, 기본설정만 하였을 경우, 화면 상 일반 패널컴포넌트랑 별차이가 없습니다.
그리드를 출력 해주기 위해서는 grid의 config 속성에 columns 라는 JSON ARRAY 형태의 VALUE를 지정해줍니다.
JSON ARRAY의 각각의 JSON OBJECT 구조가 하나의 컬럼이 되는 것입니다.
기본적인 그리드 컬럼의 속성은 아래와 같습니다.
· text : 컬럼명을 지정
· dataIndex : 각 컬럼에 출력할 데이터스토어의 fields명
· flex : 그리드 패널에서 넓이를 자동계산
· width : 최초 컬럼의 넓이지정
대신, minWidth / maxWidth 속성을 정의해주지 않을 경우,
drag&drop으로 넓이 조정가능
· align : 컬럼의 정렬과 추출되는 그리드 목록의 정렬을 일치시키면서 출력
(left/center/right)
· style : 컬럼의 css 를 적용할 수 있는 속성
· renderer : 자주 사용되는 confg 속성 중 하나입니다.
출력된 데이터를 추가적인 스크립트 코드를 이용하여 가공 후,
화면에 다시 추출