從xml到js SAPUI5自定義列表項目代碼在控制檯中沒有錯誤

我試圖用自定義列表項目 - >this design 來達到此自定義設計，只是圖標內容可以是3種類型的圖標顏色。從xml到js SAPUI5自定義列表項目代碼在控制檯中沒有錯誤

我已經用在XML視圖中做到了

<List items="{path: '/results'}" id="exemple"> 
       <CustomListItem> 
       <FlexBox alignItems="Start" 
        justifyContent="SpaceBetween"> 
       <items> 

       <core:Icon size = "2rem" src="sap-icon://flag" /* I NEED 3 ICONS HERE*/ class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" /> 
       <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" > 
       <Label class="sapUiTinyMarginEnd" text="{BM}" /> 
       <Label class="sapUiTinyMarginEnd" text="{BMS}"/> 
       </VBox> 
       </items> 
       </FlexBox> 
       </CustomListItem> 
       </List>

，而是因爲我必須要改變顏色，並且在一些OData的價值觀基礎，以動態方式的圖標，我想這樣做的控制器所以我可以使用.onAfterRendering函數和格式化程序，在XML我不知道熱指定他一個格式化程序，並在js控制器中操作它。我有一個.onAfterRendering，它改變了我的基於oData值的顏色，但是我必須根據該值更改圖標。

所以我試着在js中編寫代碼，但我在控制檯中沒有數據並且沒有錯誤。

var view = that.getView();//get view     
       var oList = sap.ui.getCore().byId(view.createId('listjs')); 
       oList.setModel(oModel); 
       var CustomListItemTemplate = new sap.m.CustomListItem(); 
       var FlexBox = new sap.m.FlexBox({ 
         alignItems : "Start", 
         justifyContent: "SpaceBetween" 
         }); 
       FlexBox.addItem(
         new sap.ui.core.Icon({ 
           src : "sap-icon://status-error", //HERE I SHOULD HAVE A FORMATTER BECOUSE I NEED 3 ICONS "sap-icon://status-error", "sap-icon://status-SUCCESS" AND "sap-icon://SOMETHING ELSE" 
           size: "2rem" 
         }), 
         new sap.m.VBox({ 

         }), 
         new sap.m.Label({ 
          text: "{BMS}" 

         }), 
         new sap.m.Label({ 
          text: "{BM}" 

         }) 
       ); 
       /*oList.onAfterRendering = function() { 
       if (sap.m.List.prototype.onAfterRendering) { 
        sap.m.List.prototype.onAfterRendering.apply(this, arguments); 
       } 
       var items = this.getItems(); 
       for (var i = 0; i < items.length; i++) { 
        var item = items[i]; 
        var obj = item.getBindingContext().getObject(); 

        switch (oData.results[0].BMS) { 
        case 'NOTGOOD': 
        { 
         item.$().find('.sapUiIcon').addClass('RED'); 

        } 
        break; 
        case 'GOOD': 
        { 
         item.$().find('.sapUiIcon').addClass('GREEN'); 
        } 
        break; 
        default: 
        { 
         item.$().find('.sapUiIcon').addClass('YELLOW'); 
        } 
        break; 
        } 
       } 
      }*/ 
      oList.bindAggregation("items","/results" ,CustomListItemTemplate);

來源

2016-09-28 CIC92

將ID從不同爲例listjs becouse我tryed重新創建它，以便在我的代碼有2個不同的列表。 – CIC92

不使用格式化器就足夠了嗎？

<List items="{path: '/results'}" id="exemple"> 
    <CustomListItem> 
     <FlexBox alignItems="Start" 
        justifyContent="SpaceBetween"> 
     <items> 
      <core:Icon size="2rem" class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" 
         src="{path: 'BMS', formatter: '.formatIconSrc'}" 
         color="{path: 'BMS', formatter: '.formatIconColor'}" /> 
      <VBox class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom" > 
       <Label class="sapUiTinyMarginEnd" text="{BM}" /> 
       <Label class="sapUiTinyMarginEnd" text="{BMS}"/> 
      </VBox> 
     </items> 
     </FlexBox> 
    </CustomListItem> 
</List>

，並在控制器：

formatIconSrc:function(bms){ 
    switch(bms){ 
     case 'NOTGOOD': 
     return "sap-icon://status-error"; 
     case 'GOOD': 
     return "sap-icon://status-success"; 
     default: 
     return "sap-icon://somethingelse"; 
    } 
}, 
formatIconColor:function(bms){ 
    switch(bms){ 
     case 'NOTGOOD': 
     return "red"; //css colors supported 
     case 'GOOD': 
     return "green"; 
     default: 
     return "yellow"; 
    } 
},

來源

2016-09-29 09:37:43 schnoedel

另一種可能性是在FlexBox中添加三個''元素 - 每個元素都有自己的圖標和css類。然後使用格式化程序將其可見屬性綁定到模型，以便一次只能看到一個圖標。 – schnoedel

仍然沒有顯示。 :( – CIC92

我不應該通過格式化程序的參數嗎？也許像格式化程序：'.formatIconColor'（bss）？在視圖中 – CIC92

從xml到js SAPUI5自定義列表項目代碼在控制檯中沒有錯誤

回答

相關問題