Ext.js Cannot read properties of undefined (reading 'controller')

Question

enter image description here

enter image description here

I am constantly getting this error that it cannot find the controller

equipChkAttachFileController.js

        // 저장
        onSaveClick: function() {
            debugger;
            var me = this;
            var myForm = me.getView().down('#myForm').getForm();
            //var recipe_id = myForm.findField('recipe_id').getValue();
            var equip_pm_plan_id = myForm.findField('equip_pm_plan_id').getValue();
            var equip_code = myForm.findField('equip_code').getValue();

            var att_type = myForm.findField('att_type').getValue();
            var fileName = myForm.findField('fileupload').getValue();
            var setCrud = "I";

            if(fileName.length == 0){
                toastr.warning("업로드할 첨부파일이 존재하지 않습니다");
                return false;
            }

            var attFile = myForm.findField('attFile').getValue();
            if(attFile.length > 0){
                setCrud = "U"
            }
            myForm.findField('crud').setValue(setCrud);
            myForm.findField('att_doc_no').setValue(equip_pm_plan_id);
            myForm.findField('att_doc_no').setValue(equip_code);

            var msgConfirm = me.getView().저장하시겠습니까;
            var msgResult  = me.getView().파일업로드가완료되었습니다;

            Ext.Msg.confirm(me.getView().확인, msgConfirm, function(btn){
                if (btn == 'yes') {
                    myForm.submit({
                        url: '../saveAttachFile',
                        waitTitle: me.getView().연결중,
                        waitMsg: me.getView().데이터수신중,
                        success: function(form, action){
                            //me.myStore.reload();
                            toastr.info(msgResult);
                            //var recipe_id =  myForm.findField('recipe_id').getValue();
                            var equip_pm_plan_id = myForm.findField('equip_pm_plan_id').getValue();
                            var equip_code = myForm.findField('equip_code').getValue();
                            var parent_store = myForm.findField('parent_store').getValue();
                            Ext.getCmp('equipChkEdit').controller.getAttachFile(equip_pm_plan_id, equip_code);
                            //me.getView().close();
                            
                            me.onRefresh();
                        },
                        failure: function(form, action) {
                            var message = Ext.ux.submitFailure(form, action);
                            Ext.Msg.show({title: action.failureType + '-side failure', msg: message, icon: Ext.Msg.ERROR, buttons: Ext.Msg.OK});
                        }
                    });                 
                }
            });
        },

This is the function that is giving error.

Ext.getCmp('equipChkEdit').controller.getAttachFile(equip_pm_plan_id, equip_code);

And this is the part that is returning error.

However the error doesn't make sense since I have a seperate js file named equipChkEdit.js and also the controller js file that is named equipChkEditController.js

The example solution I have has exactly the same structure and the same grammar

I have checked the file name and location. They're in the same folder and the names match since theyre all spelled accurately.

I tried Ext.getCmp('equipChkEditController') instead but realized that is actually wrong because .controller part is what makes up for the controller.

equipChkEdit.js

Ext.define('WithGMP.view.equipmaint.equipChkEdit', {
    extend: 'Ext.window.Window',
    requires: [
        'Ext.grid.column.Action',
        'Ext.grid.filters.Filters',
        'Ext.tab.Tab',
        'WithGMP.store.ComboStore'
    ],
    xtype: 'form-equipchkedit-window',
    controller: 'equipmaint.equipchkedit',
    reference: 'equipChkEdit',
    title: '설비 점검결과 등록',
    width: 800,
    height: 350,
    minWidth: 300,
    minHeight: 300,
    layout: 'fit',
    resizable: true,
    border: true,
    modal: true,

This is the equipChkEdit.js file where it defines its controller, which is a correct way of defining it because this is how all the example solutions define their controllers.

equipChkEditController.js

    //첨부파일 조회
    getAttachFile: function(equip_pm_plan_id, equip_code) {
        var me = this;
        var attachImageStore = Ext.create('WithGMP.store.recipe.attachImageStore');
        
        attachImageStore.load({
            params: {equip_pm_plan_id: equip_pm_plan_id, equip_code : equip_code},
            callback : function(records, operation, success) {
                if (!success) {
                } else {                    
                    //attImagteBtn.Text = Convert.ToString(dt.Rows[0]["IMGCOUNT"]) + " 건";
                    //myForm.findField('attImagteBtn').setValue(records[0].data + " 건");
                    me.getView().down('#attFileBtn').setText(me.getView().첨부파일 + " " + records[0].data + " 건");
                }
            } 
        });
    },

This is the equipChkEditController.js that defines the function getAttachFile, which is used in the part that gives the error

it is correctly defined and spelled

I have no clue why

Ext.getCmp('equipChkEdit').controller.getAttachFile(equip_pm_plan_id, equip_code);

this line is being able to find the controller when executed.

Answer 1

Overall it would be great if you would create a fiddle, so that others can see how the components work together. You are trying to call a window controller from an other window?

There are 6 possible solutions:

1. See the comment from Peter Koltai:

getCmp Documentation: Link

You have to use an ID for the component. Typically I would not recommend to use an ID. The main reason is, that you might want to open several windows and an ID has to be unique.

2. Use alternate ways to find the component, which is in case of a window not really easy, because they are not part of the component hirachie. But in case you defined a parent component you could use reference OR use up and down.:

const editWindow = me.lookupReference('equipChkEdit'),
      upDownEdit = me.getView().up('someParent').down('aField');

3. You should never, ever call upon a controller directly, because you should never take it for granted that a component exists. If the component does not exist, the controller is not available. Instead fire an Event and listen to it inside the controller, so that the viewController can alter the view.

equipChkAttachFileController.js

    Ext.fireEvent('attachedfilechange', [equip_pm_plan_id, equip_code]);

equipChkEditController.js
    listen: {
         global: {            
             attachedfilechange: 'getAttachFile'
         }
     }

4. You could make use of a utility class or mixin. This works best, if you use the functionality at several places and not only once.

Ext.define('WithGMP.util.Attachments', {
    singleton: true,

    fileAttached: function(equip_pm_plan_id, equip_code) {
        ...do something
    }
});

Call the util function

    WithGMP.util.Attachments.fileAttached(equip_pm_plan_id, equip_code);

5. Use databinding. If you bind the data to a parent component you can access it from two different windows. To do this you have to define the windows with a parentViewModel.

6. Last but not least you might have not created the view equipChkEdit yet.