Getting a error “Uncaught TypeError: undefined is not a function” when calling a function

Question

Following is my code, somewhere I am doing something wrong while calling the function but I am not able to find it, please help me with this.

this._copyChild(final_features);

Above line of code gives me above error in the below program, see for arrow in the code

            launch: function() {
                Ext.create('Rally.ui.dialog.ChooserDialog', {
                    width: 450,
                    autoScroll: true,
                    height: 525,
                    title: 'Select to Copy',
                    pageSize: 100,
                    closable: false,
                    selectionButtonText: 'Copy',                  
                    artifactTypes: ['PortfolioItem/Feature','PortfolioItem/MMF'],
                    autoShow: true,
                    storeConfig:{
                        fetch: ['Name','PortfolioItemTypeName']
                    },
                    listeners: {
                        artifactChosen: function(selectedRecord) {
                            childrens = [];
                            this._type = selectedRecord.get('PortfolioItemTypeName');
                            this._newObj = selectedRecord;
                            this.onqModelRetrieved();
                            this.getChildrens(selectedRecord);
                        },
                        scope: this
                    },
                }); 
            },
            getChildrens: function(selectedRecord) {
                Ext.create('Rally.data.wsapi.Store', {
                    model: 'PortfolioItem/' + this._newObj.get('PortfolioItemTypeName'),
                    fetch: ['Name', 'FormattedID', 'Children'],
                    pageSize: 1,
                    autoLoad: true,
                    listeners: {
                        load: function(store, records) {
                            final_features = [];
                            Ext.Array.each(records, function(child){
                                var item = selectedRecord;
                                var childrens = item.getCollection('Children');
                                childrens.load({
                                    fetch: ['FormattedID'],
                                    callback: function(childrens, operation, success){
                                        Ext.Array.each(childrens, function(child){
                                            if (child.get('PortfolioItemTypeName') == "Feature") {
                                                final_features.push(child);
            =============>                      this._copyChild(final_features);
                                            }   
                                        }, this);   
                                    },
                                    scope: this     
                                });     
                            }, this);
                        }   
                    }
                });             
            },
            // Inner Copy functions
            _copyChild: function(final_features) {
                var that = child;
                this.innerModelRetrieved(child);
            },

Answer 1

Inside that each function, this does not point to your outer object, but to the listeners object.

Creat a local var pointing to the outer object at the beginning of the getChildrens function and replace all scope params with it.

getChildrens: function(selectedRecord) {
    var self = this; // <-- local copy of `this` (owner of getChildrens)
    Ext.create('Rally.data.wsapi.Store', {
    ...
            Ext.Array.each(childrens, function(child){
                if (child.get('PortfolioItemTypeName') == "Feature") {
                    final_features.push(child);
                    this._copyChild(final_features);
                }   
            }, self); // <--- replace `this` with `self`