Ext JS 6 Invalid Component Id

In Ext 6, I got following error

ExtJs invalid component id “profile.ModifyUserBasicInfo”

Following is code producing the error

globalObject.openWindow = function(winTitle, win, winWidth, config) {
   return Ext.create('Ext.window.Window', {
      autoShow : true,
      modal : true,
      title : winTitle,
      id : win,
      resizable : false,
      width : winWidth || 300,
      items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win
   });
}

var window = ProfitShare.openWindow('Modify User Basic Information', 'profile.ModifyUserBasicInfo', 300);

This error doesn’t appear in Ext 5, after upgrading to Ext 6, it appears now.

It is caused by the id property cannot contain “.” symbol, but the id property we used here is profile.ModifyUserBasicInfo

To fix this issue, we can replace all “.” to “-“.

globalObject.openWindow = function(winTitle, win, winWidth, config) {
   return Ext.create('Ext.window.Window', {
      autoShow : true,
      modal : true,
      title : winTitle,
      id : win.replace(/\./g, '-'),
      resizable : false,
      width : winWidth || 300,
      items : typeof (win) == 'string' ? Ext.create('Forestry.app.' + win, config) : win
   });
}

Following link from describes the id property naming rule

http://docs.sencha.com/extjs/6.2.1/classic/Ext.window.Window.html#cfg-id

The original quote

Note: Valid identifiers start with a letter or underscore and are followed by (optional) additional letters, underscores, digits or hyphens.

The post Ext JS 6 Invalid Component Id appeared first on Redino blog.