Combo box do not select Value from drop down

Question

I am using ExtJs to create a combobox. Here is my code:

Ext.define('Form.FormTypeDialog', {
extend : 'Ext.Window',

id: 'formTypeDialog',

formId: null,

callbackFunction : null,

modal: true,

statics : {
    show : function(formId, callback) {
        Ext.create(Form.FormTypeDialog", {
            formId : formId,
            callbackFunction : callback
        }).show();
    }
},

constructor : function(config) {
    var me = this;

    Ext.apply(this, {
        buttons : [
            {
                text:"#{msgs.form_create_dialog_button_cancel}",
                cls : 'secondaryBtn',
                handler: function() {
                    me.close();
                }
            },
            {
                text:"#{msgs.form_create_dialog_button_next}",
                handler: function() {
                    // Get selected form type

                }
            }
        ]
    });
    this.callParent(arguments);
},

initComponent:function() {
    this.setTitle("#{msgs.form_create_dialog_title}");
    this.setHeight(175);
    this.setWidth(327);

    var formTypeStore = Mystore.Store.createRestStore({
        url : getRelativeUrl('/rest/form/formTypes'),
        root: 'objects',
        fields: ['name','value']
    });

    this.form = new Ext.form.Panel({
        style:'padding:15px;background-color:#fff' ,
        border:false,
        bodyBorder:false,
        items:[
            new Ext.form.Label({
                text: "#{msgs.form_create_dialog_select_type_label}",
                margin: "25 10 25 5"
            }),
            new Ext.form.ComboBox({
                id: 'createformTypeCombo',
                margin: "8 10 25 5",
                allowBlank: false,
                forceSelection: true,
                editable:false,
                store: formTypeStore,
                valueField: 'value',
                displayField: 'name',
                width: 260,
                emptyText: '#{msgs.form_create_dialog_select_type}'
            })
        ]
    });

    this.items = [
        this.form
    ];

    this.callParent(arguments);
}
});    

I am creating this window on a xhtml page on a button click using :

Form.FormTypeDialog.show(null, showFormWindowCallBack);

It works fine and combo box is displayed and I can select value.

But if I open and close it 4 times, then in next show it shows the values but It do not allow me to select the last two value. I can only select first value.

Please suggest.

Note: I have tried copying and executing this code in forms of other pages of my application. But behavior is same in all cases. This combobox is on a Ext.Window.

EDIT: JSON RESPONSE FROM Rest:

{"attributes":null,"complete":true,"count":3,"errors":null,"failure":false,"metaData":null,"objects":[{"name":"Application Provisioning Policy Form","value":"Application"},{"name":"Role Provisioning Policy Form","value":"Role"},{"name":"Workflow Form","value":"Workflow"}],"requestID":null,"retry":false,"retryWait":0,"status":"success","success":true,"warnings":null}

Answer 1

I have re-created this code, I had some errors showing in Firefox using your code directly so I've changed some things.

Running the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, then closing the window and repeating does not replicate this issue. Could you try using the code I have and see if you still have the same problem.

Ext.application({
    name: 'HelloExt',
    launch: function () {
        Ext.define('Form.FormTypeDialog', {
            extend: 'Ext.Window',
            id: 'formTypeDialog',
            formId: null,
            callbackFunction: null,
            modal: true,

            constructor: function (config) {
                var me = this;

                Ext.apply(this, {
                    buttons: [
                        {
                            text: "#{msgs.form_create_dialog_button_cancel}",
                            cls: 'secondaryBtn',
                            handler: function () {
                                me.close();
                            }
                        },
                        {
                            text: "#{msgs.form_create_dialog_button_next}",
                            handler: function () {
                                // Get selected form type

                            }
                        }
                    ]
                });
                this.callParent(arguments);
            },

            initComponent: function () {
                this.setTitle("#{msgs.form_create_dialog_title}");
                this.setHeight(175);
                this.setWidth(327);

                var myData = [
                    ["Application Provisioning Policy Form", "Application"],
                    ["Role Provisioning Policy Form", "Role"],
                    ["Workflow Form", "Workflow"],
                ];

                var formTypeStore = Ext.create("Ext.data.ArrayStore", {
                    fields: [
                        'name',
                        'value'
                    ],
                    data: myData,
                    storeId: "myStore"
                });

                this.form = Ext.create("Ext.form.Panel", {
                    style: 'padding:15px;background-color:#fff',
                    border: false,
                    bodyBorder: false,
                    items: [
                        Ext.create("Ext.form.Label", {
                            text: "#{msgs.form_create_dialog_select_type_label}",
                            margin: "25 10 25 5"
                        }),
                        Ext.create("Ext.form.ComboBox", {
                            id: 'createformTypeCombo',
                            margin: "8 10 25 5",
                            allowBlank: false,
                            forceSelection: true,
                            editable: false,
                            store: formTypeStore,
                            valueField: 'value',
                            displayField: 'name',
                            width: 260,
                            emptyText: '#{msgs.form_create_dialog_select_type}'
                        })
                    ]
                });

                this.items = [
                    this.form
                ];

                this.callParent(arguments);
            }
        });

        Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
            handler: function() {
                Ext.create("Form.FormTypeDialog", {}).show();
            }
        });
    }
});

You can also play around with this code using / forking from this Fiddle