Search code examples
javascriptextjsxtype

Ext JS 4.0.7 - TypeError: name is undefined

I have worked with Ext JS 6.0 and now I am trying to get my application to work in Ext JS 4.0.7. There is probably a syntax error from version 4 that is well-formed code in version 6 I am not catching, but for the life of me I cannot figure out what it is.

Referencing stores and models are no problem, but loading a custom xtype like so...

app/view/Main.js

Ext.define('App.view.Main', {
  extend: 'Ext.container.Viewport',
  title: 'App Title',
  layout: 'anchor',
  items: [
    {
      xtype: 'configurations',
      itemId: 'configurationsSidebar'
    }
  ]
});

app/view/leftSidebar/Configurations.js

Ext.define('App.view.leftSidebar.Configurations', {
  extend: 'Ext.Panel',
  alias: 'widget.configurations',
  title: 'Configuration',
  width: 250,
  minWidth: 250,
  split: true,
  collapsible: true,
  scrollable: true,
  layout: 'anchor',
  items: [
    {
      xtype: 'label',
      text: 'Hi! You can see me'
    }
  ]
});

is causing me this error in my console (the first is a warning, the second is an error):

Empty string passed to getElementById().               ext-all-debug-w-comments.js:8370:33
TypeError: name is undefined                            ext-all-debug-w-comments.js:8231:1

Any help would be appreciated.

Solution

  • The widget name does not help locate the JavaScript file, so it can't be loaded just by that name. You have to add the qualified name of the component to your father component's requires list, like this:

    Ext.define('App.view.Main', {
    requires:['App.view.leftSidebar.Configurations']

    This will cause the child component to be loaded and the xtype registered.