Question

This is using the standard ExtJS 4 MVC library and structure.

I am trying to attach multiple views to a single controller so I can create instances of them later to add to panels. Unfortunately I am getting errors about the view when I add the second one and ExtJS is blocking the syntax errors it appears so that I am unable to see where the issue is.

If I comment out ViewOrders from the list below it works fine, but if it is in there then I get the following error:

An uncaught error was raised with the following data: ext-all-debug-with-comments.js (line 7864)
msg:
"The following classes are not declared even if their files have been loaded:   'PVAL_App.view.ViewOrders'. Please check the source code of their corresponding files for possible typos: 'app/view/ViewOrders.js'"

sourceClass: "Ext.Loader"
sourceMethod: "onFileLoaded"

Here is my controller:

Ext.define('PVAL_App.controller.Viewport', {
    extend: 'Ext.app.Controller',

    views: [
      'Viewport', 'ViewOrders'
    ],

    init: function() {
      console.log('Viewport controller init()');
    }
});

Here is my ViewOrders view:

Ext.define('PVAL_APP.view.ViewOrder', {

    /* Begin Definitions */
    extend: 'Ext.panel.Panel',
    alias: 'widget.ViewOrders',

    requires: [
        'Ext.panel.Panel',
        'Ext.data.ArrayStore'
    ],

    border:false,
    layout: 'fit',
    //autoScroll: true,

    initComponent: function() {
    }
});

I doubt this is needed but this is my application file:

Ext.Loader.setConfig(
{
  enabled: true
});
Ext.application({
  name: 'PVAL_App',

  appFolder: 'app',

  autoCreateViewport: true,

  controllers: [
    'PVAL_App', 'Viewport'
  ],

  launch:function() {
    // Nothing yet.
    //console.log(this.controllers);
  }
});

I cannot seem to figure out if it is a syntax error or if this is an issue with the framework. I have experienced close to the same issue if I try to link to another controller from within one which makes me believe that this might be a constraint of the framework.

Answer 1

The problem here is that the class name in your app/view/ViewOrders.js script does not match the view name. Instead of Ext.define('PVAL_APP.view.ViewOrder', { you need the plural (and correct case) Ext.define('PVAL_App.view.ViewOrders', {. Either that our you can change your filename and refernece to the singular and just correct the case.