SAPUI5网格列表组件分组问题

我想为GridList组件使用分组功能。但当我使用分组功能时，列表项不能显示单独的行。所有项目都显示在内联位置。我使用的编码和url中的一样

这是我的观点的屏幕展示

这是我的代码：

<mvc:View xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:grid="sap.ui.layout.cssgrid"
xmlns:f="sap.f" controllerName="SapUI5Tutorial.RootApp">
<Panel>
    <content>
        <f:GridList items="{
                    path: '/DataList',
                    sorter: {
                        path: 'groupTitle',
                        group: true
                    }
                }">
            <f:customLayout>
                <grid:GridBoxLayout boxWidth="15rem"/>
            </f:customLayout>
            <f:GridListItem>
                <VBox >
                    <VBox class="sapUiSmallMargin">
                        <layoutData>
                            <FlexItemData growFactor="1" shrinkFactor="0" />
                        </layoutData>
                        <Title text="{title}" wrapping="true" />
                        <Label text="{subtitle}" wrapping="true" />
                    </VBox>
                </VBox>
            </f:GridListItem>
        </f:GridList>
    </content>
</Panel>

我哪里做错了？

---

请让我知道这个问题。我希望看到GroupHeaderList的单独一行。

我在web上做了一些研究，通过将

sap.f

库添加到

index.html

文件解决了这个问题

代码如下：

<script id ="sap-ui-bootstrap"
  src = "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-theme = "sap_belize"
  data-sap-ui-libs = "sap.m,sap.tnt,sap.f,sap.ui.commons,sap.ui.table,sap.ui.ux3"
  data-sap-ui-bindingsyntax = "complex"
  data-sap-ui-compatversion = "edge"
  data-sap-ui-resourceroots = '{ "SapUI5Tutorial": "./" }'></script>

<script id ="sap-ui-bootstrap"
  src = "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-theme = "sap_belize"
  data-sap-ui-libs = "sap.m,sap.tnt,sap.f,sap.ui.commons,sap.ui.table,sap.ui.ux3"
  data-sap-ui-bindingsyntax = "complex"
  data-sap-ui-compatversion = "edge"
  data-sap-ui-resourceroots = '{ "SapUI5Tutorial": "./" }'></script>