Finding difficulty in loading a form on click of a button

Question

I have a grid panel and it contains an add button. On clicking the button, a pop of form should be displayed. But I am getting this error continuously. GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438244873178 404 (Not Found)

Here is my List.js file that contains the grid

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

And here is the controller

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();
}

And heres the Student Form

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

So, how can I load the Student form as a pop up window. Any suggestion?

heres the error list:

GET http://localhost:8080/extServlet/MyApp/widget/student-form.js?_dc=1438247043981 404 (Not Found)

Uncaught Error: [Ext.create] Unrecognized class name / alias: widget.student-form

[E] [Ext.Loader] Some requested files failed to load.

Paweł Głowacz Paweł Głowacz · Accepted Answer · 2015-07-30T09:03:30

In your controller's method change from:

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

To:

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

Finding difficulty in loading a form on click of a button

1 Answers