Dropdown initialization inside CQ dialogs

If you need to open a component configuration dialog that contains a dropdown, you obviously have to initialize dropdown with the value which the user selected previously. ExtJS 3, which is extensively used in CQ5.* author environment, provides listener "selectionchanged", which works fine for checkboxes and radio buttons, but doesn't work for dropdowns. There's another listener which does this job very well - "afterlayout".

The example below shows how to initialize a dropdown with 2 values in the dialog form. By default "Object-Oriented" value is selected, however, if the user has previously selected other value, it will be set using the aforementioned listeners.

<type jcr:primaryType="cq:Widget"
name="./type"
fieldDescription="Enter type"
fieldLabel="Type"
type="select"
defaultValue="oop"
xtype="selection">
<options jcr:primaryType="cq:WidgetCollection">
<parallax jcr:primaryType="nt:unstructured"
text="Object-Oriented"
value="oop"/>
<normal jcr:primaryType="nt:unstructured"
text="Functional"
value="function"/>
</options>
<listeners
jcr:primaryType="nt:unstructured"
afterlayout="function(component){
initializeType(component);
}"
selectionchanged="function(selection, value, isChecked){
initializeType(selection);
}">
</type>

where initializeType is defined in a separate javascript file which is located inside clientlib:

initializeType = function(component) {
if (component && component.getValue()) {
if (component.getValue() === 'oop') {
// do some OOP logic
} else if (component.getValue() === 'function') {
// do some function logic ;-)
}
}
};