Remove and Add Gridpanel again fail with CheckboxModel in extjs4.1 and 4.2

Question

I have a panel with layout: border, that look like http://jsfiddle.net/rpcbX/

When i click add button on west region I with removeAll from center region and add something again, in this example i add and remove gridpanel.

But My gridpanel has CheckboxModel. And that can't remove after i add gridpanel again. Follow bellow step u will see bug.

1. Run my app and click add button
2. Click checkall butoon on gridpanel
3. Click add button again

Now u will see the bug, the selection was selected and u can't click checkall button to working. Look like

I think when i click add button then center region will has a new gridpanel (new state)

How to fix that thank

p/s: i was test that on extjs4.2.1 and the result's worse. i can't click checkbox on row ( i think i was click that but graphic not change)

Here is my code i using with add button

                text: 'add',
                handler: function() {
                    panel.down('panel[region="center"]').removeAll();
                    var grid = new Example();
                    panel.down('panel[region="center"]').add(grid);
                }

Answer 1

You example doesn't work because you are adding instances to the prototype and those instances of store, selModel potentially columns will be shared across all the instances of Example. Your example is hitting undefined behavior. Non primitives on the prototype is generally a bad thing and for some reason I see them on stackoverflow a lot. Here is a more in depth explanation.

Doing this for Example should help fix your problem.

Ext.define('Example', {
    extend: 'Ext.grid.Panel',
    title: 'Simpsons',
    initComponent: function() {
        Ext.apply(this, {
            selModel: Ext.create('Ext.selection.CheckboxModel', {
                checkOnly: true,
                mode: 'MULTI'
            }),
            store: Ext.create('Ext.data.Store', {
                fields: ['name', 'email', 'phone'],
                data: {
                    'items': [{
                            'name': 'Lisa',
                            "email": "lisa@simpsons.com",
                            "phone": "555-111-1224"
                        }, {
                            'name': 'Bart',
                            "email": "bart@simpsons.com",
                            "phone": "555-222-1234"
                        }, {
                            'name': 'Homer',
                            "email": "home@simpsons.com",
                            "phone": "555-222-1244"
                        }, {
                            'name': 'Marge',
                            "email": "marge@simpsons.com",
                            "phone": "555-222-1254"
                        }
                    ]
                },
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        root: 'items'
                    }
                }
            }),
            columns: [{
                    header: 'Name',
                    dataIndex: 'name',
                    editor: {
                        xtype: 'textfield'
                    }
                }, {
                    header: 'Email',
                    dataIndex: 'email',
                    flex: 1
                }, {
                    header: 'Phone',
                    dataIndex: 'phone'
                }
            ]
        });

        this.callParent();
    }

});