What causes ext js Uncaught TypeError: Cannot read property 'isComponent' of undefined after migrating from 4.0 to 4.2?

Question

JavaScript

After switching from version 4.0 to version 4.2.1, an error appeared.
Trace from google chrome console:

Uncaught TypeError: Cannot read property 'isComponent' of undefined ext-all-dev.js:58732
Ext.define.constructor ext-all-dev.js:58732
constructor ext-all-dev.js:8161
(anonymous function) index:429
(anonymous function) ext-all-dev.js:16067
fire ext-all-dev.js:16022
Ext.apply.readyEvent.readyEvent.fire ext-all-dev.js:16280
Ext.apply.fireReadyEvent ext-all-dev.js:16380
(anonymous function)

Ext.onReady(function()
{
    Ext.require([
        'Ext.data.*',
        'Ext.grid.*',
        'Ext.form.*',
        'Ext.form.field.ComboBox',
        'Ext.tree.*'
    ]);

  Ext.define('KatushkinTerritorialBundle.Area', {
    extend: 'Ext.data.Model',
    fields: [
      {name: 'id', type: 'integer'},
      {name: 'title', type: 'string'},
      {name: 'kind', type: 'string'},
      {name: 'usersCount', type: 'integer'},
      {name: 'placesCount', type: 'integer'},
      {% for translation in translations %}
        {name: 'translations.{{ translation }}.title', type: 'string', defaultValue: '', allowBlank:true},
      {% endfor %}
      {name: 'alternateTitle', type: 'string'}
    ]
  });

  //var rowEditing = Ext.create('Ext.grid.plugin.RowEditing');

  var store = Ext.create('Ext.data.TreeStore', {
    model: 'KatushkinTerritorialBundle.Area',
    proxy: {
      type: 'ajax',
      url: '{{ path('KatushkinTerritorialBundle:View:getChildren') }}'
    },
    sorters: [{
      property: 'kind',
      direction: 'ASC'
    }, {
      property: 'title',
      direction: 'ASC'
    }],
    root: {id: 1, title: 'world', usersCount: 99999, placesCount: 99999, expanded: true},
    folderSort: true
  });

  var editForm = Ext.create('Ext.form.Panel', {
    url: '{{ path('KatushkinTerritorialBundle:View:editNode') }}',
    frame:true,
    width: 300,
    hidden: true,
    renderTo: 'extjs-form',
    title: 'Editing form',
    fieldDefaults: {
      labelWidth: 75
    },
    defaultType: 'textfield',
    defaults: {
      anchor: '100%'
    },
    row: null,
    setActiveRow: function(row) {
      this.row = row
    },
    getActiveRow: function() {
      return this.row;
    },
        items:[
          {
            fieldLabel:'Title',
            name:'title[default]',
            id:'title',
            value:''
          },{
            xtype:'hiddenfield',
            name:'id',
            id: 'katushkin-territorial-form-field-id',
            value:''
          }, {
            fieldLabel:'Kind',
             xtype : 'fieldcontainer',
             id:'combo',
             items:[
               {
                  width:          210,
                  id:             'kind',
                  xtype:          'combo',
                  mode:           'local',
                  value:          'country',
                  triggerAction:  'all',
                  forceSelection:	true,
                  editable:       false,
                  name:           'kind',
                  displayField:   'name',
                  valueField:     'value',
                  queryMode:			'local',
                  store:          Ext.create('Ext.data.Store', {
                      fields :				['name', 'value'],
                      data   :	[
                                  {name : 'Country',   value: 'country'},
                                  {name : 'Federal district',  value: 'federal_district'},
                                  {name : 'Region', value: 'region'},
                                  {name : 'City',  value: 'city'},
                                  {name : 'Administrative district',  value: 'administrative_district'},
                                  {name : 'District',  value: 'district'}
                                ]
                  })
               }
             ]
          } ,
          {% for translation in translations %}
          {
            fieldLabel:'Title-{{ translation }}',
            name:'title[{{ translation }}]',
            id:'translations.{{ translation }}.title',
            value:'',
            width: 50
          },
          {% endfor %}
          {
            fieldLabel:'Title-alternate',
            name:'alternateTitle',
            id:'alternate.title',
            value:'',
            width: 50
          },
        ],
        buttons:[
          {
            text: 'Save',
            id: 'katushkin-territorial-form-edit-btn',
            hidden: true,
            handler: function() {
              treeMask.show();
              editForm.hide();
              editForm.getForm().submit({
                method: 'POST',
                success: function(form, action) {
                  treeMask.hide();
                  var parentNode = editForm.getActiveRow().parentNode;
                  parentNode.collapse(false, function() {
                    parentNode.data.loaded = false;
                  });
                }
              })
            }
          }, {
            text: 'Add',
            id: 'katushkin-territorial-form-addchild-btn',
            hidden: true,
            handler: function() {
              treeMask.show();
              editForm.hide();
              Ext.Ajax.request({
                url: '{{ path('KatushkinTerritorialBundle:View:addNode') }}',
                params: editForm.getForm().getValues(),
                success: function(response) {
                  treeMask.hide();
                  var activeNode = editForm.getActiveRow();
                  activeNode.collapse(false, function() {
                    activeNode.data.loaded = false;
                  });
                }
              });
            }
          }
        ]
    });

    var tree = Ext.create('Ext.tree.Panel', {
    store: store,
    multiSelect: true,
    tbar : [
      {
        xtype: 'button',
        id: 'katushkin-territorial-tree-tbar-addchild-btn',
        text: 'Add child',
        disabled: true,
        handler: function() {
          editForm.getForm().reset();
          Ext.getCmp('katushkin-territorial-form-edit-btn').hide();
          Ext.getCmp('katushkin-territorial-form-addchild-btn').show();
          Ext.getCmp('katushkin-territorial-form-field-id').setValue(tree.getSelectionModel().getSelection()[0].data.id);
          editForm.setActiveRow(tree.getSelectionModel().getSelection()[0]);
          editForm.show();

        }
      }, {
        xtype: 'button',
        id: 'katushkin-territorial-tree-tbar-edit-btn',
        text: 'Edit',
        disabled: true,
        handler: function() {
          Ext.getCmp('katushkin-territorial-form-edit-btn').show();
          Ext.getCmp('katushkin-territorial-form-addchild-btn').hide();
          editForm.loadRecord(tree.getSelectionModel().getSelection()[0]);
          editForm.setActiveRow(tree.getSelectionModel().getSelection()[0]);
          editForm.show();
        }
      }, {
        xtype: 'button',
        id: 'katushkin-territorial-tree-tbar-remove-btn',
        text: 'Delete',
        disabled: true,
        handler: function() {
          if (confirm('Want to remove nodes?')) {
            treeMask.show();
            var nodes = tree.getSelectionModel().getSelection();
            var nodeIds = [];
            for (i=0;i<nodes.length;i++) {
              nodeIds[i] = nodes[i].data.id;
            }
            Ext.getCmp('katushkin-territorial-form-edit-btn').hide();
            Ext.getCmp('katushkin-territorial-form-addchild-btn').hide();
            Ext.Ajax.request({
            url: '{{ path('KatushkinTerritorialBundle:View:removeNode') }}',
            params: {
              'node_ids[]': nodeIds
            },
            success: function(response){
              treeMask.hide();
              Ext.Array.each(nodes, function(node){
                var parentNode = node.parentNode;
                parentNode.collapse(false, function() {
                  parentNode.data.loaded = false;
                });
              });

            }
          });
          }
        }
      }
    ],
    viewConfig: {
      plugins: [{
        ptype: 'treeviewdragdrop'
      }],
      listeners: {
        drop: function(node, data, dropRec, dropPosition) {
          //console.log(dropRec);
          treeMask.show();
          var children_ids = [];
          for (i=0;i<data.records.length;i++) {
            children_ids[i] = data.records[i].data.id;
          }
          Ext.Ajax.request({
            url: '{{ path('KatushkinTerritorialBundle:View:moveNode') }}',
            params: {
              parent_id: dropRec.data.id,
              'children_ids[]': children_ids
            },
            success: function(response){
              treeMask.hide();
              //console.log(response.responseText);
            }
          });
        },
        itemclick: function(view, record, item, index, event, option) {
          Ext.getCmp('katushkin-territorial-tree-tbar-addchild-btn').disable();
          if (record.data.kind != 'district') {
            Ext.getCmp('katushkin-territorial-tree-tbar-addchild-btn').enable();
          }
          Ext.getCmp('katushkin-territorial-tree-tbar-edit-btn').enable();
          Ext.getCmp('katushkin-territorial-tree-tbar-remove-btn').enable();
          //editForm.loadRecord(record);
        }
      } // listeners
    },
    renderTo: 'extjs-tree-container',
    autoRender: false,
    height: 600,
    width: 1000,
    title: 'TerritorialBundle',
    useArrows: true,
    animShow: true,
    scroll: 'both',
    columns: [{
      text: 'id',
      flex: 1,
      dataIndex: 'id',
      align: 'right'
    }, {
      xtype: 'treecolumn',
      text: 'Title',
      flex: 10,
      sortable: true,
      dataIndex: 'title'
    }, {
      text: 'Kind',
      flex:2,
      dataIndex: 'kind',
      field: {
        xtype:'combobox',
        triggerAction:'all',
        store:[
          ['country','country'],
          ['city','city']
        ]
      }
    }, {
      text: 'Users',
      flex: 1,
      dataIndex: 'usersCount',
      sortable: true,
      align: 'right'
    }, {
      text: 'Places',
      flex: 1,
      dataIndex: 'placesCount',
      sortable: true,
      align: 'right'
    },
    {% for translation in translations %}
    {
      text: 'Title-{{ translation }}',
      flex: 3,
      sortable: true,
      dataIndex: 'translations.{{ translation }}.title',
      width: 50
    },
    {% endfor %}
    {
      text: 'Title-alternate',
      flex: 5,
      sortable: true,
      dataIndex: 'alternateTitle',
      width: 50
    },
    ]
  });

    var treeMask = new Ext.LoadMask(tree);
   tree.render();

{% - Twig tags
Thanks in advance.

Answer 1

The issue was resolved by deleting everything related to treeMask.