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