Ext.Loader stalls on circular referenced components

[zombeerose]

I am using the requires config to dynamically load my components on demand. I ran into one problem where the loader would stall if the component chain has a circular reference.

For example (pseudo-code):

Ext.define('Grid_A', {
  extend:'Grid'
  requires: ['Window_A']
  initComponent: function(){
    this.callParent(args);
    Ext.create('Window_A').show();
  }
});

Ext.define('Window_A', {
  extend:'Window'
  requires: ['Grid_A']
  constructor: function(){
    Ext.apply(this,{ items: [ 'Grid_A' ] });
    this.callParent(args);
  }
});

Ext.define('Panel_A', {
  extend:'Panel'
  requires: ['Grid_A']
  constructor: function(){
    Ext.apply(this,{ items: [ 'Grid_A' ] });
    this.callParent(args);
  }
});

This is not a very common occurrence but in the effort of component re-use, it is possible. If I change the Window_A requires to uses, then it works.

[Jacky Nguyen]

Use ext-dev.js during development. Ext.Loader has built-in deadlock detection so it will throw a very useful message and let you know the full deadlock path.