設計內表

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