tab pannel 내부 그리드 관련

tab pannel 안에 horizontal-vertical로 layout을 나눠서 각각 3개의 그리드를 그리려고 하는데요.

<ax:tab-layout name="ax1" data_fit_height_content="layout-view-01" style="height:100%;">
    <ax:tab-panel label="tab1" scroll="auto" active="true">
        <ax:split-layout name="ax1" orientation="horizontal">
            <ax:split-panel height="280" style="padding-bottom: 10px;">
                <div data-ax5grid="grid-view-01" id="tab1MasterGrid" style="height: 280px;"></div>
            </ax:split-panel>
            <ax:split-panel height="300" style="padding-bottom: 10px;  margin-top: 5px;">
                <ax:split-layout name="ax1" orientation="vertical">
                    <ax:split-panel width="*" style="padding-right: 5px;">
                        <div data-ax5grid="grid-view-02" id="tab1DetailGrid1" style="height: 290px; margin-top: 5px;"></div>
                    </ax:split-panel>
                    <ax:split-panel width="*" style="padding-right: 5px;">
                        <div data-ax5grid="grid-view-03" id="tab1DetailGrid2" style="height: 290px; margin-top: 5px;"></div>
                    </ax:split-panel>
                </ax:split-layout>
            </ax:split-panel>
        </ax:split-layout>
    </ax:tab-panel>
    <ax:tab-panel label="tab2" scroll="auto" active="false">
        <ax:split-layout name="ax1" orientation="horizontal">
            <ax:split-panel height="280" style="padding-bottom: 10px;">
                <div data-ax5grid="grid-view-04" id="tab2MasterGrid" style="height: 280px;"></div>
            </ax:split-panel>
            <ax:split-panel height="300" style="padding-bottom: 10px;  margin-top: 5px;">
                <ax:split-layout name="ax1" orientation="vertical">
                    <ax:split-panel width="*" style="padding-right: 5px;">
                        <div data-ax5grid="grid-view-05" id="tab2DetailGrid1" style="height: 290px; margin-top: 5px;"></div>
                    </ax:split-panel>
                    <ax:split-panel width="*" style="padding-right: 5px;">
                        <div data-ax5grid="grid-view-06" id="tab2DetailGrid2" style="height: 290px; margin-top: 5px;"></div>
                    </ax:split-panel>
                </ax:split-layout>
            </ax:split-panel>
        </ax:split-layout>
    </ax:tab-panel>
</ax:tab-layout>

이렇게 구현했는데 계속 tab2의 그리드들이 정상적으로 표시되지 않네요.
tab2 상단 그리드는 showRowSelector:true인데도 체크박스가 보이지 않고, 하단 그리드들은 width:0px 으로 출력됩니다. 따로 설정값을 준게 없는데 계속해서 저렇게 출력되서, 해결방법을 여쭤보고 싶습니다.