SAP UI 5에 서로 다른 3 개의 목록을 표시하는 방법은 무엇입니까?

Question

나는 서로 옆에 표시하고 싶은 3 가지 목록을 가지고 있지만 어떤 이유로 서로 아래에 표시되고 있습니다.

JSView를 사용하고 있습니다.

여기 내 코드와 스크린 샷의 관련 부분이 있습니다.

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

내 컨트롤러;

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

나는 VBox 서로 옆에 있지만, 분명히 그것은 실제로해야하는 방식으로 작동하지 않습니다 내 경우에는 항목을 표시 실제로 생각했다.

Chrome Dev에서 재생하려고했습니다. 변화하는 폭을 가진 도구와 편집 된 스타일은 도움이되지 않았습니다.

어떻게 서로 옆에 표시 할 수 있습니까? 내 "목록"지금까지 (나쁜 페인트 기술에 대한 죄송)의 모습

그리고 여기에 스크린 샷입니다 (같이 첫 번째 목록의 0 인덱스는 두 번째 목록 등의 0 인덱스 옆)

Answer 1

HBox으로 VBox를 변경해보세요.

sap.m.HBox 

코드에서 VBox를 사용하면 예상 한대로 작동합니다.