表内列的设计

Question

我对元素的对齐有问题

我有sap.m.Table并且在表格中我有sap.m.InputListItem

 var tbl= new sap.m.Table({
                width: "100%",
                headerToolbar: new sap.m.Toolbar({
                    content: [
                        new sap.ui.core.Icon({
                            src : "nav-back",
                            press: this.onNavBack.bind(this)
                        })
                        , new sap.m.Title({
                            text: this.roleDetail
                        })]
                }),
                columns: [new sap.m.Column({
                    header: new sap.m.Text({
                        text: " Menu"
                    })
                }),
                    new sap.m.Column({
                        header: new sap.m.Text({
                            text: " App"
                        })
                    })
                ],
                items: [
                    fieldOfColumnItems
                ]
            });

在循环中我填充此变量fieldOfColumnItems

fieldOfColumnItems.push(new sap.m.ColumnListItem({
                    cells: [menu[i], menuItems[i]]
                }))

如何让这些下拉列表在右侧？我希望它看起来不错。 有什么想法吗？

Answer 1

使用sap.m.FlexBox：

...
  var oTable = new sap.m.Table({
    columns: [
      new sap.m.Column({
        header: new sap.m.Text({
          text: "Menu"
        })
      }),
      new sap.m.Column({
        header: new sap.m.Text({
          text: "App"
        })
      })
    ],
    items: [
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "foo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "bar"
                  })
                ]
              }),
            ]
          })
        ]
      }),
      new sap.m.ColumnListItem({
        cells: [
          new sap.m.FlexBox({
            justifyContent: "SpaceBetween",
            alignItems: "Center",
            items: [
              new sap.m.Label({
                text: "longerfoo"
              }),
              new sap.m.Select({
                items: [
                  new sap.ui.core.Item({
                    text: "barfits"
                  })
                ]
              }),
            ]
          })
        ]
      })
    ]
  });
...

executable example

添加：

由于你的评论：

fieldOfColumnItems.push(
  new sap.m.ColumnListItem({
    cells: [
      new.sap.m.FlexBox({
        justifyContent: "SpaceBetween",
        alignItems: "Center",
        items: [
          menu[i],
          menuItems[i]
        ]
      })
    ]
  })
)