Difficulty in passing selected row from grid to new window in extjs

Question

I have a grid panel and when the user selects the row and clicks the edit button or dbl clicks the row, I want to send the selected row to the new window. But I am having trouble in sending the data.

Here is 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',
collapsible: true,
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();
            }
        }
    }
}]
});

And this my Controller (MainController.js)

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]);
},

And here is the pop up window where the data has 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'
                    }
                }
            ]
        }]
}]
});

What am I missing here?Any suggestions?

*"I am having trouble in sending the data"*... What trouble exactly? No data sent? Error message? What happens when you try? — Greendrake, Jul 31 '15 at 06:13
It says loadRecord() is not a function and I can't find other way. — user3127109, Jul 31 '15 at 06:16

Greendrake · Accepted Answer · 2015-07-31T06:38:03.867

1

It says loadRecord() is not a function

Your MyApp.view.student.StudentForm is not actually a form. It is a window, hence there is no loadRecord method.

Instead of form.loadRecord(record); call form.down('form').loadRecord(record).

Remember, it is worth naming things what they are.

edited Jul 31 '15 at 06:38

answered Jul 31 '15 at 06:32

Greendrake

3,657
2
18
24

One question how can I reference that window instead of doing var form = Ext.create('MyApp.view.student.StudentForm'); because first a blank form is displayed and only after closing the blank form, the form with the data is loaded. – user3127109 Jul 31 '15 at 07:05
The blank form is apparently the result of calling `Ext.create('MyApp.view.student.StudentForm')` the second time; only you know why you are doing it :) – Greendrake Jul 31 '15 at 07:45
This can't be a general helpdesk chat, sorry, so I suggest that you post another question here on SO. I could also provide consulting/development service on commercial basis per arrangement. – Greendrake Jul 31 '15 at 08:30

Difficulty in passing selected row from grid to new window in extjs

1 Answers1