In ExtJS 4.2.2, why does loadRecord() load data, but form does not reflect new data?

Question

Using ExtJS 4.2.2

I have a grid, and when I right click the grid and select Modify from my context menu, a Window with a form is created, and on render, I get the grid selected row record and use the form loadRecord to load the record.

Firebug shows the record was loaded into the form fields, but in the rendered form the fields are enpty.

Any ideas?

Here is some code that illustrates the issue.

If you put a breakpoint at the line with var test = 'test'; you will see the data is loaded into the form's textfields, but then continue past the break point and see the textfields do not reflect the data.

Ext.onReady(function() {
    Ext.define('com.myCompany.MyGridModel', {
        extend : 'Ext.data.Model',
        fields : [{
            name : 'name',
            type : 'string'
        }, {
            name : 'address',
            type : 'string'
        }, {
            name : 'type',
            type : 'string'
        }]
    });
    var store = Ext.create('Ext.data.Store', {
        model: 'com.myCompany.MyGridModel',
        proxy: {
            type: 'ajax',
            url: 'centers.json',
            reader: {
                type: 'json',
                root: 'centers'
            }
       }
    });
    store.load();
    var grid = Ext.create('Ext.grid.Panel', {
        layout: 'fit',
        store: store,
        columns: [{
            text: 'Name',
            dataIndex: 'name',
            name: 'name'
        }, {
            text: 'IP Address',
            dataIndex: 'address',
            name: 'address'
        }, {
            text: 'Type',
            dataIndex: 'type',
            name: 'type'
        }],
        renderTo: Ext.getBody(),
        listeners: {
            itemcontextmenu : function(view, record, item, index, event){
                var selectedItem = record;
                event.preventDefault();
                new Ext.menu.Menu({
                    items: [{
                        text : 'Modify',
                        handler : function(widget, event) {
                            Ext.create('Ext.window.Window', {
                                height : 380,
                                width : 540,
                                resizable : false,
                                closable: true,
                                modal: true,
                                layout :{
                                    type : 'fit'
                                },
                                items : [{
                                    xtype : 'form',
                                    frame : true,
                                    height : 250,
                                    itemId : 'centerContentForm',
                                    width : 400,
                                    bodyPadding : 10,
                                    items : [{
                                        xtype : 'textfield',
                                        itemId : 'txtName',
                                        height : 30,
                                        width : 401,
                                        fieldLabel : 'Name',
                                        name: 'name',
                                        allowBlank : false
                                    },{
                                        xtype : 'textfield',
                                        itemId : 'txtIPAddress',
                                        height : 30,
                                        width : 401,
                                        fieldLabel : 'Address',
                                        name: 'address',
                                        allowBlank : false,
                                    },{
                                        xtype : 'textfield',
                                        itemId : 'txtType',
                                        height : 30,
                                        width : 401,
                                        fieldLabel : 'Type',
                                        name: 'type',
                                        allowBlank : false
                                    }]
                                }],
                                listeners: {
                                    render: function(win) {
                                        win.down('form').loadRecord(selectedItem);
                                        var test = 'test';
                                    }
                                }
                            }).show();
                        } // end of right-click handler
                    }]
                }).showAt(event.getXY());
            }
        }
    });
    grid.getView().refresh();
});

Answer 1

Instead of render event handler you should use afterrender event handler.

So your window listeners config should be:

listeners: {
    afterrender: function(win) {
        win.down('form').loadRecord(selectedItem);
    }
}