下面的示例演示了分组页签的使用方法,layout:groupTabLayout布局的子标签是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" >这是title4的内容</layout:panel>
			</layout:groupTabPanel>
		</layout:groupTabLayout>

ManagedBean:

@ManagedBean(name = "ux.layout.groupTabsLayoutBean", scope = ManagedBeanScope.REQUEST)
public class GroupTabsLayoutBean {
    @ManagedProperty("#{companyService}")
    private CompanyService companyService;
    @ManagedProperty("#{employeeService}")
    private EmployeeService employeeService;
    @ManagedProperty("#{departmentService}")
    private DepartmentService departmentService;
    @Bind(id = "grid")
    private List<Company> getCompanys() {
        return companyService.findAll();
    }
    @SaveState
    private List<Employee> employees;
    @Bind(id = "employeeGrid")
    private List<Employee> getEmployess() {
        return employees;
    }
    @BeforeRender
    public void beforeRender(boolean isPostback) {
        if (!isPostback) {
            employees = employeeService.findAll();
            for (Employee employee : employees) {
                Department department = departmentService.findById(employee.getDepartmentId());
                employee.setDepartmentName(department.getName());
                employee.setCompanyName(companyService.findById(department.getCompanyId())
                        .getName());
            }
        }
    }
}