Why does my ExtJS 4.2 grid with CheckboxModel stop working?

Question

In the following grid when you first popup the window, you can select items with the checkboxes.

But if you click OK to close the popup, and then click to launch it again, the checkboxes do not seem to work.

If you close the popup and launch it again, the checkboxes you just clicked on are now selected/deselected.

If I set closeAction to 'hide' on the window this issue goes away, but then don't I lose the value of the default closeAction of destroy?

In fact, not destroying the window and re-creating it every time messes up other stuff, so setting closeAction to hide does not work in my real app.

When closeAction is set to destroy, when a grid row checkbox is clicked, at least these three events are dispatched: itemclick, cellclick, select. But when closeAction is set to hide, the select event is not dispatched.

Ext.define('MyPopup', {
    extend: 'Ext.window.Window',
    alias: 'widget.myPopup',
    width: 200,
    height: 200,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'grid',
        selModel: Ext.create('Ext.selection.CheckboxModel', {
            checkOnly: false,
            mode: "MULTI"
        }),
        store: Ext.create('Ext.data.Store', {
            fields: ['name'],
            data: [
                {name: 'one'},
                {name: 'two'},
                {name: 'three'}
            ]
        }),
        columns: [{
            text: 'Name',
            dataIndex: 'name'
        }]
    }],
    dockedItems: [{
        dock: 'bottom',
        xtype: 'button',
        width: '50',
        text: 'OK',
        handler: function(comp){
            comp.up('window').close();
        }
    }]
});

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        renderTo: Ext.getBody(),
        layout: 'fit',
        items: [{
            xtype: 'container',
            layout: {
                type: 'vbox',
                align: 'center'
            },
            items: [{
                xtype: 'button',
                width: 50,
                text: 'Click',
                handler: function(){
                    Ext.create('MyPopup').show();
                }
            }]
        }]
    });
});

Answer 1

I was able to recreate your issue in a fiddle and found that if instead of creating the checkboxmodel object you define it. It fixes the issue.

Here is code demonstrating defining the selType and selModel configs:

Ext.define('MyPopup', {
            extend: 'Ext.window.Window',
            alias: 'widget.myPopup',
            width: 200,
            height: 200,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'grid',
                selType:'checkboxmodel',
                selModel: {
                    checkOnly: false,
                    mode: "MULTI"
                },
                store: Ext.create('Ext.data.Store', {
                    fields: ['name'],
                    data: [{
                        name: 'one'
                    }, {
                        name: 'two'
                    }, {
                        name: 'three'
                    }]
                }),
                columns: [{
                    text: 'Name',
                    dataIndex: 'name'
                }]
            }],
            dockedItems: [{
                dock: 'bottom',
                xtype: 'button',
                width: '50',
                text: 'OK',
                handler: function(comp) {
                    comp.up('window').close();
                }
            }]
        });

And a working fiddle for demonstration.