7.4 서브 컴포넌트 속성
React JavaScript, React TypeScript, Vue JavaScript 및 Vue TypeScript 래퍼에 직접 전달하는 속성입니다.
엔진의 gridProps와 구분하여 지정하십시오. 이 문서는 서브 컴포넌트 1.7을 기준으로 하며,
resizeMode는 1.7부터 지원합니다. 이 번호는 AUIGrid 엔진 버전이나 npm 타입 패키지 버전이 아닙니다.
다음 옵션은 생성 시 설정합니다. 실행 중 prop 값을 변경하는 것만으로 그리드 설정이나 크기 감지 방식이 자동 전환되지는 않습니다.
엔진의 실행 중 변경은 setProp() 등 해당 메서드를 사용합니다.
7.4.1 autoResize
타입: Boolean. 기본값: true. 지원: 네 래퍼 모두.
선택한 resizeMode에 따라 자동 크기 감지를 등록합니다.
false이면 자동 감지를 등록하지 않으며, 필요한 시점에 래퍼의 resize()를 직접 호출할 수 있습니다.
<!-- Vue에서는 문자열 "false"가 아닌 Boolean을 전달합니다. -->
<AUIGrid ref="gridRef" :columnLayout="columns" :gridProps="props"
:autoResize="false" />React에서는 autoResize={false}로 지정합니다.
7.4.2 columnLayout
타입: Array, TypeScript에서는 IGrid.Column[]. 지원: 네 래퍼 모두.
그리드를 생성할 칼럼 레이아웃입니다.
React JS/TS 및 Vue TS의 기본값은 [], Vue JS의 기본값은 null입니다.
Vue JS에서 null이면 초기 자동 생성을 수행하지 않습니다. 일반적인 사용에서는 칼럼 배열을 명시적으로 전달하십시오.
생성 후 칼럼 구조를 바꾸려면 changeColumnLayout()을 사용합니다.
정의 방법은 칼럼 레이아웃 문서를 참고하십시오.
7.4.3 footerLayout
타입: Array, TypeScript에서는 IGrid.Footer[]. 지원: 네 래퍼 모두.
생성 시 적용할 푸터 레이아웃입니다.
React JS/TS 및 Vue TS의 기본값은 [], Vue JS의 기본값은 null입니다.
푸터를 표시하려면 gridProps.showFooter=true도 설정합니다.
생성 이후에는 setFooter()를 사용합니다.
항목 작성법은 푸터 레이아웃 문서를 참고하십시오.
7.4.4 gridProps
타입: Object, TypeScript에서는 IGrid.Props. 지원: 네 래퍼 모두.
엔진의 생성 속성을 담습니다.
React JS와 Vue JS의 기본값은 {}, React TS와 Vue TS의 기본값은 null입니다.
생략한 엔진 속성은 해당 엔진 및 래퍼의 공통 설정에 따릅니다.
// 엔진 생성 속성입니다. resizeMode 같은 래퍼 옵션은 여기 넣지 않습니다.
const props = {
width: '100%',
height: 360,
editable: true,
enableFilter: true
};공식 래퍼는 상단의 AUIGrid.defaultProps에 autoScrollSize: true와
simplifySelectionEvent: true를 설정합니다. 특히 선택 이벤트에서 selectedItems가 필요하다면
simplifySelectionEvent 설명과 관련 제약을 확인하십시오.
공통 설정을 수정하면 같은 엔진을 사용하는 다른 그리드에도 영향을 줄 수 있습니다.
7.4.5 name
타입: String. 기본값: "". 지원: 네 래퍼 모두.
그리드를 담는 호스트 DIV의 ID를 만들 때 사용합니다. name="orders"이면
ID는 aui-grid-wrap-orders가 됩니다. 생략하면 래퍼가 임의 식별자를 만듭니다.
이름을 지정한다면 같은 문서에서 고유해야 합니다. KeepAlive에 보관된 화면도 그리드 인스턴스가 남아 있으므로
다른 화면에 같은 이름을 재사용하지 마십시오.
7.4.6 resizeDelayTime
타입: Number. 기본값: 300ms. 지원: 네 래퍼 모두.
자동 크기 감지 알림이 연속해서 들어올 때 마지막 알림 뒤 기다리는 시간입니다. window 방식과 container 방식에 모두 적용합니다. 0 이상의 밀리초 값을 지정하십시오.
container 방식은 이 지연 이후 다음 애니메이션 프레임에서 크기를 반영합니다.
0으로 지정해도 동기 실행되는 것은 아닙니다. 수동 resize() 호출에 이 지연이 추가되지는 않습니다.
7.4.7 resizeMode
타입: "window" | "container". 기본값: "window".
지원: 네 래퍼의 1.7부터. 1.6에는 이 옵션이 없습니다.
window: 기존처럼 창의 resize 이벤트에 반응합니다.container:ResizeObserver로 그리드를 담는 호스트 DIV의 크기 변화를 감지합니다. 창 크기가 같아도 사이드바 접기나 부모 레이아웃 변경으로 호스트 크기가 바뀌면 그리드를 조정합니다.
이 속성은 래퍼 옵션입니다. gridProps.resizeMode 또는 엔진의 setProp('resizeMode', ...)로 지정하지 않습니다.
autoResize=false이면 감지 방식을 지정해도 자동 감지는 동작하지 않습니다.
React JS / TypeScript
// 기존 AUIGrid 태그에 직접 지정합니다. columns와 props는 생성 설정입니다.
<AUIGrid ref={gridRef} columnLayout={columns} gridProps={props}
resizeMode="container" resizeDelayTime={100} />Vue JS / TypeScript
<AUIGrid ref="gridRef" :columnLayout="columns" :gridProps="props"
resizeMode="container" :resizeDelayTime="100" />크기와 레이아웃
관찰 대상은 엔진 내부 셀이 아닌 호스트 DIV입니다. 크기가 달라지지 않으면 다시 호출하지 않으며,
DOM이 분리되었거나 너비 또는 높이가 5px 이하이면 크기 조정을 건너뜁니다.
ResizeObserver가 없는 환경에서는 창 크기 이벤트로 대체합니다.
gridProps에 width: '100%', height: 360을 사용하면 너비는 부모에 맞추고 높이는 지정값으로 유지합니다.
높이까지 부모를 따르게 하려면 호스트와 부모의 CSS 높이를 명확하게 정의해야 합니다.
Flex/Grid 배치에서는 필요에 따라 min-width: 0을 지정하고, 그리드 콘텐츠가 부모 크기를 계속 늘리는 순환 배치를 피하십시오.
생명주기
언마운트 또는 수동 destroy() 시 관찰자와 예약된 작업을 정리합니다.
create()로 다시 생성하면 다시 연결됩니다.
Vue의 KeepAlive에서는 deactivated에서 중단하고 activated에서 관찰을 재개하며,
크기 조정을 위해 그리드를 파괴하거나 재생성하지 않습니다.
실제 resize()가 호출되면 편집 완료 등 엔진의 기존 리사이징 동작이 적용됩니다.
autoGridHeight의 데이터 기반 높이 정책도 유지합니다.
7.4.8 waitPortalRendering
타입: Boolean. 기본값: false.
지원: React JS, React TS 및 Vue TS. Vue JS에서는 지원하지 않습니다.
true이면 그리드의 최초 생성을 requestAnimationFrame으로 다음 프레임에 예약합니다.
Portal이나 Teleport에서 호스트가 부착되는 시점 차이를 처리할 때 사용합니다.
임의 길이의 전환 애니메이션이나 비동기 데이터 로딩이 끝날 때까지 기다리는 옵션은 아닙니다.
true인 경우 부모의 effect 또는 mounted가 실행되어도 아직 그리드가 없을 수 있으므로,
실제 DOM 부착과 isCreated() 확인 후 메서드를 호출하십시오.