selectionchanged event is not working - extjs

Question

I have two felds in my dialog, one is text field(leftpadding) and another is dropdown with four options(option 1, option 2, option 3, option 4).My requirement is to display/enable the textfiled when the user selects option 3 and option 4 only.
I added listeners(selectionchanged) node to the dropdown field. loadcontent event is firing but selectionchanged is not working fine. Please find below for the code snippet
selectionchanged:
function(field,value){
var layoutoption = "";
layoutoption = field.findParentByType('dialog').form.findField('./footerstyle').getValue();
alert('layoutoption :'+layoutoption);
if(layoutoption =='3' || layoutoption =='4'){
field.findParentByType('dialog').form.findField('./leftPadding').enable(this);
}else {
field.findParentByType('dialog').form.findField('./leftPadding').disable(this);
}}

Answer 1

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();
}
}