难以将所选行从网格传递到extjs中的新窗口

时间:2015-07-31 05:45:45

标签: javascript extjs extjs5 extjs6 extjs6-classic

我有一个网格面板,当用户选择行并单击编辑按钮或dbl单击该行时,我想将所选行发送到新窗口。但是我在发送数据方面遇到了麻烦。

这是我的网格面板。 (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();
            }
        }
    }
}]
});

这是我的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]);
},

这是弹出窗口,其中必须加载数据(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'
                    }
                }
            ]
        }]
}]
});

我在这里缺少什么?有什么建议吗?

1 个答案:

答案 0 :(得分:0)

  

它表示loadRecord()不是函数

您的MyApp.view.student.StudentForm实际上不是表格。它是窗口,因此没有loadRecord方法。

而不是form.loadRecord(record);来电form.down('form').loadRecord(record)

请记住,值得为它们命名。