Dropdown initialization inside CQ dialogs

If you need to open component configuration dialog which contains a dropdown, you obviously have to initialize dropdown with the value which 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".

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

        }

    }

};