Wie werden 3 verschiedene Listen im SAP UI 5 nebeneinander angezeigt?

Question

Ich habe 3 verschiedene Listen, die ich nebeneinander anzeigen möchte, aber aus irgendeinem Grund werden sie untereinander angezeigt.

Ich verwende JSViews.

Hier sind die relevanten Teile meines Codes und Screenshots;

in meinem JSView;

var keysList = new sap.m.List(this.createId("keysList"), { 

    }); 
    var valList1 = new sap.m.List(this.createId("valList1"), { 

    }); 
    var valList2 = new sap.m.List(this.createId("valList2"), { 

    }); 
    var vBox2 = new sap.m.VBox({ 
     alignItems: "Start", 
     justifyContent: "Start", 
     items: [ 
      keysList, 
      valList1, 
      valList2 
     ] 
    }).addStyleClass("vbox2"); 

    var oPageMerkliste2 = new sap.m.Page({ 
     showHeader: false, 
     content: [ 
      toolbar, 
      vBox1, 
      vBox2 
     ] 
    }); 

    return oPageMerkliste2; 

mein Controller;

 var keysList = this.byId("keysList"); 
     var keysModel = new sap.ui.model.json.JSONModel(); 
     keysModel.setData(keysObj);   
     console.log("keysList", keysList); 
     keysList.setModel(keysModel); 
     var template0 = new sap.m.CustomListItem({ 
      content: [ 
       new sap.m.VBox({ 
        items: [ 
         new sap.m.Text({ 
          text : "{}" 
         }) 
        ] 
       }).addStyleClass("listSize") 
      ] 
     }).addStyleClass(""); 
     keysList.bindAggregation("items", "/", template0); 
     //val list 1 
     var valList1 = this.byId("valList1"); 
     var valList1Model = new sap.ui.model.json.JSONModel(); 
     valList1Model.setData(valsObj1);   
     console.log("valList1", valList1); 
     valList1.setModel(valList1Model); 
     var template1 = new sap.m.CustomListItem({ 
      content: [ 
       new sap.m.VBox({ 
        items: [ 
         new sap.m.Text({ 
          text : "{}" 
         }) 
        ] 
       }).addStyleClass("listSize") 
      ] 
     }).addStyleClass(""); 
     valList1.bindAggregation("items", "/", template1); 
      //val2 list 
     var valList2 = this.byId("valList2"); 
     var valList2Model = new sap.ui.model.json.JSONModel(); 
     valList2Model.setData(valsObj2);   
     console.log("valList2", valList2); 
     valList2.setModel(valList2Model); 
     var template2 = new sap.m.CustomListItem({ 
      content: [ 
       new sap.m.VBox({ 
        items: [ 
         new sap.m.Text({ 
          text : "{}" 
         }) 
        ] 
       }).addStyleClass("listSize") 
      ] 
     }).addStyleClass(""); 
     valList2.bindAggregation("items", "/", template2); 

Ich dachte VBox die Elemente tatsächlich für die Anzeige war nebeneinander, aber anscheinend in meinem Fall ist es es sollte in der Art und Weise verhalten, nicht wirklich.

Ich habe versucht, damit auf Chrome Dev zu spielen. Werkzeuge und bearbeitete Stile mit wechselnder Breite s aber es hat auch nicht geholfen.

Wie kann ich sie nebeneinander anzeigen? (Wie 0. Index der ersten Liste ist neben 0. Index der zweiten Liste etc.)

Und hier ist ein Screenshot, wie meine „Liste“ sieht so weit (sorry über schlechte Farbe Fähigkeiten)

Answer 1

Versuchen Sie, VBox mit HBox zu ändern.

sap.m.HBox 

In Ihrem Code, Ihre VBox verwenden, so ist es die erwartete.