设计内表

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] 
     ] 
     }) 
    ] 
    }) 
)