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

 

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 “-“.

 

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.