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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
38 | |
19 | |
14 | |
12 | |
10 | |
10 | |
10 | |
8 | |
8 | |
8 |