SAPUI5 sap.m.StandardTreeItem 如何设置背景色？

Question

I would like to set a custom color of sap.m.Tree items . Looking other examples in sap.m.List , I implemented onAfterRendering of sap.m.StandardTreeItem :

snip
    sap.m.StandardTreeItem.extend('MySuperDuperTreeItem', {
     metadata: {
     properties: {
         status: 'string'
     }
     },      
     onAfterRendering: function() {
     if (sap.m.StandardTreeItem.prototype.onAfterRendering) {
         sap.m.StandardTreeItem.prototype.onAfterRendering.apply(this, arguments);
     }
     //var a = getItem(); NOT WORKING
     this.$().find('div').each(function() {
         if ($(this).hasClass('sapMCbBg')) {
         $(this).addClass("myPurple");
         }
     });
     },
     renderer:{}

 });

I have put an example here .

From the JSBin link, you can see the check boxes have a custom color, but I would like to set their color based on item's title. Also, the tree item detail button is not properly displayed an expand and collapse.

Is there an alternative way to color check boxes? Why it is not possible to access sap.m.StandardTreeItem members (like getTitle() ) in onAfterRendering function?

Answer 1

Use this.getTitle() in the onAfterRendering method to get the title. And based on that title you can add your style class based on the title as below

    onAfterRendering: function() {
         sap.m.StandardTreeItem.prototype.onAfterRendering.apply(this, arguments);
         var title = this.getTitle();
         this.$().find('div').each(function() {
             if ($(this).hasClass('sapMCbBg')) {
               if (jQuery.sap.startsWith(title, "A-Node")) {
                 $(this).addClass("myPurple");
               } else if (jQuery.sap.startsWith(title, "B-Node")) {
                 $(this).addClass("myYellow");
               }
             }
         });
     }

And the thing about the tree item detail button is not properly displayed an expand and collapse, you have to just modify your code little bit as below

 var oStandardTreeItem = new MySuperDuperTreeItem({
     title: "{text}",
     type: sap.m.ListType.Detail
 });
 oTree.bindItems("/", oStandardTreeItem);
 oTree.expandToLevel(3);
 oTree.setMode(sap.m.ListMode.MultiSelect);
 var oPage = new sap.m.Page("TreeTest", {
     title : "Test Page for sap.m.Tree",
     content : [oTree]
 });

Here is the link that renders the check boxes with different colors based on the title.