使用tabLayout布局，当页签较多时，可能会需要将某些同性质的页签归类，这些归类可以收起，也能够展开，此时就需要分组的tabLayout了。

分组页签布局是一个新的布局，而不是原先的页签布局的插件（页签布局目前有多个插件，比如右键菜单，页签滚动归组等等）。该布局由标签<layout:tabGroupLayout>实现，其子标签为<layout:groupTabPanel>，用来表示一个分组。每个分组下面使用几个<layout:panel>填充。下面是一个例子。

<layout:groupTabLayout activeGroup="1" tabWidth="130" fit="true" style=" border: 0px solid red;">
    <layout:groupTabPanel mainItem="0">
        <layout:panel title="公司信息" autoScroll="true" onactivate="gridJsvar.syncSize();"   >
            <w:dataGrid id="grid"  jsvar="gridJsvar" paged="true" rows="10" width="800" height="400" >
                <w:outputColumn id="id" hidden="true" hidable="false" />
                <w:outputColumn id="name" align="center" sortable="true" header="公司" />
                <w:outputColumn id="leadingProduct" header="主打产品" />
                <w:outputColumn id="address" header="地址" />
                <w:outputColumn id="phone" header="联系电话" />
                <w:outputColumn id="homepage" header="公司主页" />
                <w:pagingToolbar displayInfo="true" displayMsg="显示 {0} - {1}，共 {2} 条" />
            </w:dataGrid>
        </layout:panel>
        <layout:panel title="员工信息" onactivate="employeeGridJsvar.syncSize();" autoScroll="true"  >
            <w:dataGrid id="employeeGrid" jsvar="employeeGridJsvar" paged="true" rows="10" width="800" height="400" >
                <w:outputColumn id="id" hidden="true" hidable="false" />
                <w:outputColumn id="departmentId" hidden="true" hidable="false" />
                <w:outputColumn id="name" width="200" align="center" sortable="true" header="名称" />
                <w:outputColumn id="companyName" width="300" header="所在公司名称" />
                <w:outputColumn id="departmentName" header="所在部门名称" />
            </w:dataGrid>
        </layout:panel>
    </layout:groupTabPanel>
    <layout:groupTabPanel mainItem="1"  >
        <layout:panel title="title3"  jsvar="panel3" url="caseinfo/groupTabsLayout_detail.xhtml" ></layout:panel>
        <layout:panel title="title4"  jsvar="panel4" > some content </layout:panel>
    </layout:groupTabPanel>
</layout:groupTabLayout>

上面的代码中，activeGroup="1" 说明 groupTabLayout 中当前激活的分组是第二个分组，tabWidth可配置页签的宽度。第一个layout:groupTabPanel的mainItem="0"，表明在当前分组中，第一个页签是主页签，当前分组被收起后将只显示这个页签。除了演示的几个属性，其他的属性可以查阅相关文档：《构件参考》。

该组件用起来非常简单，开发完后台LiteBean，运行起来的效果就像这样：

需要注意的是，该组件在IE6下可能会工作不正常。查看完整示例代码可参考官网示例《分组页签布局》