找到点击按钮加载表单的难度

时间:2015-07-30 08:36:55

标签: javascript extjs

我有网格面板,它包含添加按钮。单击该按钮时,应显示一个弹出窗体。但我不断得到这个错误。获取http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438244873178 404(未找到)

这是我的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',
                listeners: {
                    click: 'onEdit'
                }
            },
            {
                xtype: 'button',
                text: 'Delete',
                iconCls: 'fa fa-trash-o',
                listeners: {
                    click: 'onDelete'
                }
            }]
        }
    ]
});

这是控制器

onAdd: function(button, e, options)
{
    this.createDialog(null);
},

createDialog: function(record)
{
    var me = this,
        view = me.getView();
    debugger;
    me.dialog = view.add({
        xtype: 'student-form'
    })
    me.dialog.show();
}

继续学生表格

Ext.define('MyApp.view.student.StudentForm', {
extend: 'Ext.window.Window',
alias: 'widget.student-form',

height: 270,
width: 400,
layout: {
    type: 'fit'
},

title: 'Add Student',
closable: false,
modal: true,
items: [{
    xtype: 'form',
    reference: 'form',
    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',
            labelWidth: '75'
        },
        items: [
            {
                xtype: 'hiddenfield',
                name: 'id',
                fieldLabel: 'Label'
            },
            {
                fieldLabel: 'Name'
            },
            {
                fieldLabel: 'Address'
            },
            {
                fieldLabel: 'Phone'
            },
            {
                fieldLabel: 'Email'
            },
            {
                xtype: 'combo',
                fieldLabel: 'Faculty',
                displayField: 'name',
                valueField: 'id',
                queryMode: 'local',
                forceSelection: true,
                editable: false,
                name: 'faculty-id',
            }
        ],
        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'
                    }
                }
            ]
        }]
    }]
}]
});

那么,如何将学生表单作为弹出窗口加载。有什么建议吗?

继承错误列表:

获取http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438247043981 404(未找到)

未捕获错误:[Ext.create]无法识别的类名/别名:widget.student-form

[E] [Ext.Loader]某些请求的文件无法加载。

1 个答案:

答案 0 :(得分:0)

在你的控制器的方法中改变:

createDialog: function(record)
{
    var me = this,
        view = me.getView();
    debugger;
    me.dialog = view.add({
        xtype: 'student-form'
    })
    me.dialog.show();
}

要:

createDialog: function(record)
{
    Ext.createWidget('student-form');
}