EXTJS Window/Panel close error

Question

I'm creating a new EXTJS window and inside that window there is a panel and inside that panel there is a form!

When I click on the 'X' or cancel to close the window I get this error:

Uncaught TypeError: Cannot read property 'className' of undefinedhasClass
@ ext-all-debug.js:2252addClass
@ ext-all-debug.js:2183Ext.Button.Ext.extend.onMouseOver
@ ext-all-debug.js:31140aK
@ miframe.js:1

I am using this handler in the cancel button:

handler: function () {
    this.close();
},

Full code -

example.SurveyFieldDefaultWindow = Ext.extend(Ext.Window, {

id: 'survey-default-win',
title: 'Custom Survvey',
modal: true,
closable: true,
width: 500,
height: 600,
frame: true,
bodyStyle: 'padding: 5px',
forceFit: true,
constrainHeader: true,
layout: 'fit',
initComponent: function () {
    this.canEdit = this.checkEditPermissions();
    questionStore2 = questionStore;


    var survey_window = Ext.getCmp('survey-win');
    survey_window.afterRender(
        survey_window.getFormValues()
    );

    formValues2 = formValuesObj;

     survey_default_id = Math.floor(10000 + Math.random() * 90000);

    Ext.apply(
        this, {
            items: [{
                xtype: 'tabpanel',
                id: 'survey-field-form-tabpanel',
                layoutOnTabChange: true,
                activeTab: 0,
                items: [{
                    title: 'Questions',
                    layout: 'fit',

                    items: [{
                        xtype: 'form',
                        id: 'survey-field-form',
                        border: false,
                        bodyStyle: 'padding: 5px;',
                        frame: true,
                        defaultType: 'textfield',

                    }]
                }]
            }],
            buttons: [{
                id: 'save-button',
                text: 'Default-Save',
                handler: function () {
                    this.saveForm()
                },
                scope: this
            }, {
                text: 'Default-Cancel',
                handler: function () {
                    this.close();

                },
                scope: this
            }]

        }
    );
    example.SurveyFieldDefaultWindow.superclass.initComponent.apply(this, arguments);

    var data = questionStore2.data.items;

    for (var i = 0; i < data.length; i++) {
        if (data[i].data.fieldTypeName == "DropDownList" || data[i].data.fieldTypeName == "RadioButtonList" || data[i].data.fieldTypeName == "CheckBoxList" || data[i].data.fieldTypeName == "Rating" || data[i].data.fieldTypeName == "YesNo") {
            // create a Record constructor:
            var rt = Ext.data.Record.create([
                {name: 'optionValue'},
                {name: 'optionText'}
            ]);
            var myStore = new Ext.data.Store({
                // explicitly create reader
                reader: new Ext.data.ArrayReader(
                    {
                        idIndex: 0  // id for each record will be the first element
                    },
                    rt // recordType
                )
            });
            var myData = [];

            for (var j = 0; j < data[i].data.selectOptions.list.length; j++) {

                var optionText = data[i].data.selectOptions.list[j].optionText.toString();
                var optionValue = data[i].data.selectOptions.list[j].optionValue.toString();

                myData.push([optionValue, optionText]);

            }

            myStore.loadData(myData);

            var id = data[i].data.name.toString();
            var cb = new Ext.form.ComboBox({
                fieldLabel: data[i].data.name,
                id: id,
                typeAhead: true,
                allowBlank: true,
                mode: 'local',
                emptyText: 'Select Default value',
                width: 190,
                margin: '40 30 20 10',
                store: myStore,
                valueField: 'optionValue',
                displayField: 'optionText',
                selectOnFocus: true,
                triggerAction: 'all',
                listeners: {
                    'select': function (cb, newValue, oldValue) {

                        for (var i = 0; i < formValues2.fields.list.length; i++)
                        {
                            for (var j = 0; j < formValues2.fields.list[i].selectOptions.list.length; j++)
                            {

                                if(formValues2.fields.list[i].name == cb.fieldLabel ){
                                    if( formValues2.fields.list[i].selectOptions.list[j].optionText == cb.lastSelectionText) {
                                        formValues2.fields.list[i].selectOptions.list[j].preselect = true;
                                    }

                                }
                            }
                        }
                    }
                }
            });
            Ext.getCmp('survey-field-form').add(cb);
            Ext.getCmp('survey-field-form').doLayout();

        }
    }


    getDefaultSurveyFormValues = Ext.getCmp('survey-field-form');
    getDefaultSurveyFormValues.on("afterrender", function () {
        //this code will run after the panel renders.
        if (getDefaultSurveyFormValues != undefined) {
            getDefaultSurveyFormValues.getForm().getValues();

        }
        else {
            console.log('undefined getDefaultSurveyFormValues');
        }
    });


},
checkEditPermissions: function () {
    return Security.hasAccess("Surveys", Security.UPDATE_ACCESS);
},

saveForm: function () {

    // disable save button while saving form
    // Ext.getCmp('save-button').disable();             ----------------------------------- undo comment later
    // submit the form using a jabsorb call


    Ext.getCmp('survey-field-form').getForm().doAction("JabsorbSubmit", {
        formValues: formValues2,
        jabsorbMethod: Jabsorb.getInstance().surveyTemplateService.saveSurveyTemplate,
        //   timeout:300000,
        failure: function (form, action) {
            Ext.Msg.alert('Request Failed', 'Could not save survey template information to generate Survey View: ' + action.result.msg);
        },
        success: function (form, action) {
            Ext.Msg.alert('magic' , 'magic');

        }
    });
}
});

Ext.reg('example.SurveyFieldDefaultWindow', example.SurveyFieldDefaultWindow);

Answer 1

I've made a fiddle, based on your code to create the window and using the close button. Check it here: https://fiddle.sencha.com/#fiddle/16lu

From what i've seen, in your initComponent: function() { you never call the this.callParent() method. It's very important for class inheritance if you use the initComponent config.

From the docs:

Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).

Answer 2

In this scope, this represent the button and not the window, so you trying to close the button