Sapui5 如何在JS视图中使用sap.m.CustomListItem实现相同的功能？

我想在

sap.m.ObjectListItem

中列出所有信息，但在

sap.m.CustomListItem

中，请参见所附的屏幕截图。我如何做到这一点？有没有可行的例子

这就是我迄今为止所做的，还有很长的路要走：

var oListTemplate = new sap.m.CustomListItem({
      content: [
        new sap.m.VBox({
          items: [
            new sap.m.Text({
              text: "{nct_id}"
            }),
            new sap.m.HBox({
              justifyContent: "SpaceBetween",
              items: [
                new sap.m.Label({
                  textAlign: sap.ui.core.TextAlign.Left,
                  text: "{title}",
                }).addStyleClass("Text_Big font_bold"),
                new sap.m.FormattedText({
                  textAlign: sap.ui.core.TextAlign.Right,
                  htmlText: "{condition_summary}"
                }),
              ]
            }).addStyleClass("sapUiTinyMargin")
          ]
        }).addStyleClass("sapUiTinyMargin"),
      ],
      type: sap.m.ListType.Active,
      press: function() {
        alert("Clicked the list item");
      }

---

这是你要找的，希望这对你有帮助。 正如@Erch所建议的，最好使用XML视图

JS

XML

到目前为止您尝试了什么？没有人使用JSViews是有原因的。。。。为什么不使用XMLViews呢？：由于需求的原因，他可能正在尝试一些JS视图片段

var oListTemplate = new sap.m.CustomListItem({
    content: [
      new sap.m.HBox({
        items: [
          new sap.m.FlexBox({
            items: [
              new sap.m.VBox({
                width: "80%",
                items: [
                  new sap.m.ObjectIdentifier({ title: "", text: "", titleActive: "false" }),
                  new sap.m.Label({ text: "" }),
                  new sap.m.Label({ text: "" })
                ],
                layoutData: new sap.m.FlexItemData({ growFactor: 3 })
              })
              new sap.m.VBox({
                width: "100px",
                items: [
                  new sap.m.Label({ text: "" }),
                  new sap.m.Label({ text: "" }),
                  new sap.m.ObjectStatus({ text: "", state: "Success" })
                ],
                layoutData: new sap.m.FlexItemData({ growFactor: 1 })
              })
            ],
            width: "100%",
            alignItems: "Start"
          })
        ],
        width: "100%",
        fitContainer: "true"
      }).addStyleClass("sapUiTinyMargin"),
    ],
    type: sap.m.ListType.Active,
    press: function() {
      alert("Clicked the list item");
    })
}

<List>
    <items>
        <CustomListItem>
            <HBox width="100%" fitContainer="true">
                <FlexBox width="100%" alignItems="Start" class="sapUiTinyMargin">
                    <items>
                        <VBox width="80%">
                            <ObjectIdentifier title="" text="" titleActive="false" />
                            <Label text="" />
                            <Label text="" />
                            <layoutData>
                                <FlexItemData growFactor="3" />
                            </layoutData>
                        </VBox>
                        <VBox width="100px" class="sapUiTinyMarginBegin">
                            <items>
                                <Label text="" />
                                <Label text="" />
                                <ObjectStatus text="Product Shipped" state="Success" />
                            </items>
                            <layoutData>
                                <FlexItemData growFactor="1" />
                            </layoutData>
                        </VBox>
                    </items>
                </FlexBox>
            </HBox>
        </CustomListItem>
    </items>
</List>