Tristate sap.m.CheckBox

Just want to share a Tristate Checkbox in for SAP Mobile control.

It illustrates the followings

1. Extending an existing control. sap.m.Checkbox

2.Using css :before to place icon in the checkbox

3. Override the fireSelect function so that the state is returned to the listener.

4. With a few lines of code and CSS, we can easily extend an control

sap.m.CheckBox.extend('TriStateCheckBox', {
  metadata: {
    properties: {
      state: {type: 'int', defaultValue: 0}
    }
  },
 
  onAfterRendering: function() {
    var $this = this.$();
    $this.find('div').removeClass('sapMCbMarkChecked');
    $this.removeClass('triStateCheckBoxSelected');
    $this.removeClass('triStateCheckBoxMixed');
   
    if (this.getState() === 1) {
      $this.addClass('triStateCheckBoxSelected');
    } else if (this.getState() === 2) {
      $this.addClass('triStateCheckBoxMixed');
    }
  },
 
  fireSelect: function(s) {
    var v = s.selected ? 1 : 0;
    this.setState(v);
    this.fireEvent('select', {'state': v});
  },

  renderer: {}
});

CSS

.triStateCheckBoxSelected div:before {
   content: "\e05b";
  font-family: "SAP-icons";
  color: #007cc0;
}

.triStateCheckBoxMixed div:before {
   content: "\e17b";
  font-family: "SAP-icons";
  color: #007cc0;
}

-Dennis