Row can't be selected in gridPanel, but the object remains in the SelectionModel

[zenite4]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.1.1

Browser versions tested against:

• Google Chrome 20.0.1132.57 m
• Firefox 13.0.1 (firebug 1.9.2 installed)
• IE 9.0.8112.16421
• Opera 11.64 build 1403
• Safari 5.1.7 (7534.57.2)

DOCTYPE tested against:

• ____

Description:

• After a record be updated by record.save() method in a gridPanel, the selected row becomes deselected in gridPanel. If we try to select the same row again, the row does not get selected, but the object still remains on store.getSelection().getSelection().

Steps to reproduce the problem:

• In a gridPanel, add a new record
• fill all the fields
• save the record
• select the added record
• fire edit button
• edit the record
• save the record
• try to select the edited record

The result that was expected:

• The record should not get deselected
• It should be possible to select the record again

The result that occurs instead:

• The record remains in store.getSelection().getSelection() but the row can't be selected until another row is selected

Test Case:

    Ext.onReady(function() {


    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'id',
            type: 'int'},
        {
            name: 'name',
            type: 'string'},
        {
            name: 'phone',
            type: 'string'}],
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }


    });


    var store = Ext.create('Ext.data.Store', {
        storeId: 'userStore',
        model: 'User',
        autoLoad: true,
        data: {
            'items': []
        },
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'items'
            }
        }
    });


    Ext.define('UserEdit', {
        extend: 'Ext.window.Window',
        modal: true,
        autoShow: true,
        items: [{
            xtype: 'form',
            items: [{
                xtype: 'textfield',
                name: 'id',
                fieldLabel: 'ID'},
            {
                xtype: 'textfield',
                name: 'name',
                fieldLabel: 'Name'},
            {
                xtype: 'textfield',
                name: 'phone',
                fieldLabel: 'Phone'}]}],
        buttons: [{
            text: 'Save',
            handler: function() {
                var me = this,
                    win = me.up('window'),
                    form = win.down('form'),
                    record = form.getRecord(),
                    values = form.getValues(),
                    store = Ext.getCmp('userGrid').getStore();


                if (record == null) {
                    record = Ext.create('User', values);
                }
                else {
                    record.set(values);
                }
                
                record.save({
                    callback: function(record, operation, success) {
                        if (operation.success) {


                            var r = store.getById(record.get('id'));
                            if (r == null) {
                                store.add(record);
                            }


                            store.sync();
                        }
                    }
                });


                win.close();
            }},
        {
            text: 'Cancel',
            handler: function() {
                this.up('window').close();
            }}]
    });




    Ext.create('Ext.grid.Panel', {
        title: 'Users',
        id: 'userGrid',
        store: store,
        columns: [
            {
            text: 'ID',
            dataIndex: 'id'},
        {
            text: 'name',
            dataIndex: 'name',
            flex: 1},
        {
            text: 'Phone',
            dataIndex: 'phone'}
        ],
        dockedItems: [{
            xtype: 'toolbar',
            items: [{
                text: 'Add',
                handler: function() {
                    Ext.create('UserEdit');
                }},
            {
                text: 'Edit',
                handler: function() {
                    var win = Ext.create('UserEdit');
                    var item = this.up('grid').getSelectionModel().getSelection()[0];
                    win.down('form').loadRecord(item);
                }}]},
        {
            xtype: 'pagingtoolbar',
            store: store,
            dock: 'bottom',
            displayInfo: true}],
        height: 300,
        width: 400,
        renderTo: Ext.getBody()
    });


});

HELPFUL INFORMATION




Screenshot or Video:

• not available

See this URL for live test case: http://jsfiddle.net/eduardosouza/QgPzV/4/




Debugging already done:

• none

Possible fix:

• not provided

Additional CSS used:

• only default ext-all.css

Operating System:

• Windows 7 Professional

[mitchellsimoens]

I can reproduce this with 4.1.1 but using out latest code that will be part of 4.1.2 the record remains selected after you save the edited record.