ExtJS 4 MVC Application: Form undefined error

Question

I am new to ExtJS 4 and am trying to implement a simple application in MVC style. The documentation is really good and this is one of the topics covered in the Form package guide, but it doesn't seem to work in my case.

The app basically can create, edit and delete articles.The creation and editing are in pop-up windows. The pop-up window contains a form with a text field and html-editor. Please click on the link below,this is the error in Google Chrome Console when I click on the submit button in the 'window'

http://www.freeimagehosting.net/mjig7

Here is the code which I've written Model:

Ext.define('AM.model.Article', {
    extend: 'Ext.data.Model',
    fields: ['name', 'data'],
    proxy: {
        type: 'rest',
        url: 'users/data',
        reader: {
            type: 'json',
            root: 'myJaxBean',
            successProperty: 'success'
        },
        writer: {
            type: 'json'
        }
    }
});

View:

Ext.define('AM.view.New', {
    extend: 'Ext.window.Window',
    alias : 'widget.new',
    title : 'New Article',
    autoShow: true,
    fieldDefaults: {
        labelAlign: 'top',
        msgTarget: 'side'
    },
    layout: 'fit',
    bodyStyle:'padding:5px 5px 0',
    width: '70%',
    height: '40%',
    initComponent: function() {
        this.items = [
            {
                xtype: 'form',
                anchor: '99%',
                items: [
                    {
                        xtype: 'textfield',
                        name : 'name',
                        fieldLabel: 'Article Name',
                        anchor: '99%'
                    },
                    {
                        xtype: 'htmleditor',
                        name : 'data',
                        fieldLabel: 'Article',
                        anchor: '99% -25'
                    }
                ],
                buttons: [
                {
                    text: 'Submit',
                    handler: function() {
                        var form = this.up('form').getForm(), // get the basic form
                            record = form.getRecord(); // get the underlying model instance
                        if (form.isValid()) { // make sure the form contains valid data before submitting
                            form.updateRecord(record); // update the record with the form data
                            record.save({ // save the record to the server
                                success: function(user) {
                                    Ext.Msg.alert('Success', 'User saved successfully.')
                                },
                                failure: function(user) {
                                    Ext.Msg.alert('Failure', 'Failed to save user.')
                                }
                            });
                        } else { // display error alert if the data is invalid
                            Ext.Msg.alert('Invalid Data', 'Please correct form errors.')
                        }
                    }
                },
                {
                    text: 'Cancel',
                    scope: this,
                    handler: this.close
                }
            ]
            }
        ],


        this.callParent(arguments);
    }
});

and finally the code in my controller which makes the window visible

Controller:

.....

'viewport > panel > panel > tbar button[action=newarticle]' :{
                click: this.newArticle
            },
....

   newArticle: function(button){
        var view = Ext.widget('new');
    },

Please point me in the right direction in case I am doing something wrong. Thanks in advance.

Answer 1

Check the docs getRecord():

Returns the last Ext.data.Model instance that was loaded via loadRecord

so it's clear that you haven't load any record, so you getRecord() returns undefined. And you are getting your error further.