Attaching multiple views to a controller in ExtJS 4 MVC - model-view-controller

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.