Я хотел бы использовать функцию группировки для компонента GridList. Но когда я использовал функцию группировки, элементы списка не могут отображать отдельные строки. Все элементы отображаются во встроенном положении. Я использую ту же кодировку, что и в этом URL
Вот скриншот моего взгляда https://ibb.co/M90Pb5T
Вот мой кодировка:
<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>
Здесь находится контроллер. js (Функция инициализации)
var data = [
{ title: "Grid item title 1", subtitle: "Subtitle 1", groupTitle: "Group A" },
{ title: "Grid item title 2", subtitle: "Subtitle 2", groupTitle: "Group A" },
{ title: "Grid item title 3", subtitle: "Subtitle 3", groupTitle: "Group A" },
{ title: "Grid item title 10", subtitle: "Subtitle 10", groupTitle: "Group B" },
{ title: "Grid item title 11", subtitle: "Subtitle 11", groupTitle: "Group B" },
{ title: "Grid item title 12", subtitle: "Subtitle 12", groupTitle: "Group B" },
];
oModel.setProperty("/DataList", data);
Где я делаю ошибку?
Пожалуйста, дайте мне знать об этой проблеме. Я хотел бы видеть отдельную строку для GroupHeaderListItem.