My goal is to send the selected row from a grid panel to a new window when the user clicks the edit button or double-clicks the row. However, I am encountering difficulties in sending the data.

Below is the code for my grid panel (List.js):

Ext.define('MyApp.view.main.List', {
extend: 'Ext.grid.Panel',
xtype: 'mainlist',

require: [ 'MyApp.view.student.StudentForm' ],
title: 'Student Records',
scrollable: true,
margin: 20,
layout: {
    type: 'vbox',
    align: 'stretch'
},

reference: 'studentGrid',
frame: true,
collapsible: true,
store: 'StudentStore',
columns: [
    { 
        text: 'Name', 
        dataIndex: 'name',
        flex: 1 
    },

    { 
        text: 'Address', 
        dataIndex: 'address', 
        flex: 1 
    },
    { 
        text: 'Phone', 
        dataIndex: 'phone', 
        flex: 1
    },
    { 
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    },
    { 
        text: 'Faculty',
        dataIndex:'faculty',
        flex: 1
    }
],

dockedItems: [
    {
        xtype: 'toolbar',
        dock: 'top',
        items: [
            {
                xtype: 'button',
                text: 'Add',
                iconCls: 'fa fa-plus',
                listeners: {
                click: 'onAdd'
            }
            },
            {
                xtype: 'button',
                text: 'Edit',
                iconCls: 'fa fa-edit',
                id: 'editButton',

                listeners: {
                   click: 'onEdit'
                }
            },
            {
                xtype: 'button',
                text: 'Delete',
                iconCls: 'fa fa-trash-o',
                bind: {
                    disabled: '{ !mainlist.selection }'
                },
                listeners: {
                    click: 'onDelete'
                }
            }]
        }
    ],
// toolbar for our store filter field
tbar: [{
    xtype: 'textfield',
    fieldLabel: 'Search Student',
    emptyText: '...type to filter',
    width: 300,
    listeners: {
        change: 'onSearch'
    },
    triggers: {
        clear: {
            cls: 'x-form-clear-trigger',
            handler: function(){
                this.reset();
            }
        }
    }
}]
});

My Controller (MainController.js) implementation:

createDialog: function(record)
{
    if (record)
    {
        var form = Ext.create('MyApp.view.student.StudentForm');
        form.loadRecord(record);
        form.show();
    }
   Ext.create('MyApp.view.student.StudentForm').show();
},

onEdit: function(button, e, options){
    var row = button.up('mainlist').getSelection();
    debugger;
   this.createDialog(row[0]);
},

The pop-up window layout where the data needs to be loaded (StudentForm.js):

Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
xtype: 'student-form',
height: 400,
width: 500,
layout: {
    type: 'fit'
},
reference: 'form',
title: 'Add Student',
closable: true,
modal: true,
items: [{
    xtype: 'form',
    id : 'formId',
    bodyPadding: 5,
    modelValidation : true,
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'fieldset',
        flex: 1,
        title: 'Student Information',
        layout: 'anchor',
        defaultType: 'textfield',
        defaults: {
            anchor: '100%',
            msgTarget: 'side'
        },
        items: [
            {
                xtype: 'hiddenfield',
                name: 'id',
                fieldLabel: 'Label'
            },
            {
                fieldLabel: 'Name',
                name: 'name'
            },
            {
                fieldLabel: 'Address',
                name: 'address'
            },
            {
                fieldLabel: 'Phone',
                name: 'phone'
            },
            {
                fieldLabel: 'Email',
                name: 'email'
            },
            {
                xtype: 'combo',
                fieldLabel: 'Faculty',
                name: 'facultyName',
                queryMode: 'local',
                displayField: 'facultyName',
                valueField: 'facultyName',
                store: {
                    fields: ['facultyName'],
                    data: [{
                        facultyName: 'computing'
                    }, {
                        facultyName: 'multimedia'
                    }, {
                        facultyName: 'networking'
                }]
            }
            }
        ]
    }],
        dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'bottom',
            layout: {
                pack: 'end',
                type: 'hbox'
            },
            items: [
                {
                    xtype: 'button',
                    text: 'Save',
                    iconCls: 'fa fa-check',
                    listeners: {
                        click: 'onSave'
                    }
                },
                {
                    xtype: 'button',
                    text: 'Cancel',
                    iconCls: 'fa fa-times',
                    listeners: {
                        click: 'onCancel'
                    }
                }
            ]
        }]
}]
});

I seem to be missing something crucial here. Any suggestions would be greatly appreciated!