If you look at the CQ.form.Selection API, you would find that when the selectionchanged event is fired, the following arguments would be passed to the listener.
- this : The selection field
- value : The raw value of the selected field
- isChecked : true / false, used when the selection is of type checkbox.
Thus, you could modify your listener as shown below.
function(field, value) {
var dlg = field.findParentByType('dialog');
// the value holds the value of the selection
if(value =='3' || value =='4'){
// getField() of the dialog class returns the field with the given name
dlg.getField('./leftPadding').show();
}else {
dlg.getField('./leftPadding').hide();
}
}
The getField() method of the CQ.Dialog returns the field with the given name. In case more than one field with the same name exists, it returns an array of those fields. You can then show() or hide() the fields based on your requirements.
EDIT : CQ 5.4 somehow doesn't remove the entire widget, instead removes only the input field leaving behind the Field Label, Description etc.
In such cases the following function may be used.
function(field, value) {
var dlg = field.findParentByType('dialog');
if(value == '3' || value == '4') {
dlg.getField('./leftPadding').el.parent('.x-form-item').show();
}
else {
dlg.getField('./leftPadding').el.parent('.x-form-item').hide();
}
}