ax5ui-layout 질문입니다.

안녕하세요! ax5ui-layout 기본 예제 중 dockPannel 를 따라하고 있는 데

실제 출력 결과랑 예상 결과가 너무 달라 질문 드립니다.

<div data-ax5layout="ax1" data-config="{layout:"dock-panel"}" style="height: 500px;border:1px solid #ccc;">
<div data-dock-panel="{dock:"top", split:true, height: 100, maxHeight: 300}" style="text-align: center;"><h4>TOP</h4></div>
<div data-dock-panel="{dock:"bottom", split:"true", height: 100, minHeight: 10, maxHeight: 300}" style="text-align: center;"><h4>BOTTOM</h4></div>
<div data-dock-panel="{dock:"left", split:true, width: 100, minWidth: 10, maxWidth: 300}"><h4>LEFT</h4></div>
<div data-dock-panel="{dock:"right", split:true, width: 100, minWidth: 10, maxWidth: 300}"><h4>RIGHT</h4></div>
<div data-dock-panel="{dock:"center"}" style="padding: 5px;text-align: center;">
    <h4>CENTER</h4>
</div>

이렇게 넣어주고 js 작성을 했는 데

실제로는 Top Bottom Left Right Center 순서로만 나열 됩니다.

기본 레이아웃 써보신 분들 혹시 계신가요?