无法使用Form Extjs 4将数据从网格加载到新窗口

Question

i'm having an issue loading data from a grid to a form in Extjs 4.

I'm trying to send the field vid to the form, just for testing but I can't even do that. Found lots of examples, tried the ideas. can't do it.

The data comes from mongodb.

I can show it in a grid perfectly.

And now I want to click in the Edit Button to open a window with a form and show the information.

What am I missing?

Ext.define('DevJS.view.users.List', {
    extend: 'Ext.grid.Panel',
    autoHeight: true,
    forceFit: true,
     this.columns = [
                {text: 'Id', dataIndex: '_id', hidden: true},
                {
                    text: 'Vid',
                    dataIndex: 'vid',
                    autoSizeColumn: true

                }
    ...
    xtype: 'actioncolumn',
                        autoSizeColumn: true,
                        items: [
                            {
                                iconCls: 'button-edit',
                                tooltip: 'Edit',
                                handler: function (grid, rowIndex, colIndex) {
                                    this.up('grid').fireEvent('editRow', grid, rowIndex, colIndex);
                                }
                            },
                            {
                                iconCls: 'button-info',
                                itemId: 'Comments',
                                text: 'Comments',
                                handler: function (grid, rowIndex, item) {
                                    alert(rowIndex)
                                    win.record = rowIndex;

                                    win.show()
                                }
                            }
                        ]
                    }
                ];

                //parent
                this.callParent(arguments);
            }
        });

        var form = new Ext.form.FormPanel({
            title : 'Test form',
            id:'form',
            width : 300,
            items : [{
                xtype: 'textfield',
                editable:false,
                fieldLabel: 'vid',
                name: 'vid'
            }]
        });

        var win = new Ext.Window({
            title : 'test',
            items : [{
                xtype : 'panel',
                layout : 'column',
                items : [form]
            }],
            listeners:{
                afterrender:function(window) {
                    if(window.record) window.down('form').loadRecord(window.record);
                }
            }
        });

Answer 1

just try this at after render method :

if(window.record) window.down('form').getForm().loadRecord(window.record);

hope it works.

Answer 2

When you create the window, it is rendered (the DOM is built somewhere in the background) but window.record is not yet set.

But after the handler sets win.record , the window is not rerendered, only shown.

So it should work if you switch from the afterrender to beforeshow event, which is executed every time win.show() is called.

Furthermore, window.record contains the index of the record, not the record itself; but loadRecord takes a record, not an index. Try sth like win.record = grid.getStore().getAt(rowIndex); and loadRecord` should be able to load the record.