如何在JS View中使用sap.m.CustomListItem实现相同的目的？

Question

我想像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");
      }

Answer 1

这是您想要的，希望对您有所帮助。 正如@Erch建议更好地使用XML视图。

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");
    })
}

XML

<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>