View Full Version : MVC Help/ExtJs4 - Newby some confusion here

27 Dec 2011, 1:20 PM

I have an MVC style app I am developing. I'm just a tad confused with regard to getting the application to load via the Viewport.

I have an index.html which loads extjs and css etc. It also loads the Application.js.

In Application.js I have

name: 'app1',
autoCreateViewport: true,
appFolder,: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {


controllers: ['tbarController', 'wspaceController', 'fbarController']

I have a file called Viewport.js.

In Viewport.js I have,

Ext.define('Myapp'.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [ 'Myapp.view.tbar', 'Myapp.view.wspace', 'Myapp.view.fbar'],

layout: 'fit',

initComponent: function() {
this.items = {
xtype: 'tbar',
xtype: 'wspace',
xtype: 'fbar'

What I am missing is the linkage to make Application.js load the Viewport.js. Can someone provide a little insight please? Thanks in advance.

27 Dec 2011, 3:31 PM
Please use [CODE] tags when posting code.

Some thoughts...

There's an extra quote in your Ext.define, get rid of it. Make sure you're using an IDE to pick up these kind of things or you'll be fighting with it forever.
If you have autoCreateViewport then you shouldn't be explicitly creating the viewport yourself, that'll cause problems. It'll automatically create it. It need to be in a file under app/view/Viewport.js, where the app part is your configured appFolder.
The name on your application config must be the first part of the namespace for your classes. Currently you have it set to app1 but everything else seems to be in the Myapp namespace.
The items in your viewport are confused. You have 3 xtypes and 2 heights on the same config object. I suspect what you were aiming for is an array containing 3 configs? Again, any JS validator/IDE would have picked up that mistake.
You can't use a fit layout with 3 items, it only supports 1. Perhaps fbar and tbar are supposed to be dockedItems instead, leaving wspace to be the single item?
Class names should start with a capital letter. e.g. Myapp.view.Tbar. Your file names also need to perfectly match the class names and namespace or they won't load correctly, e.g. app/view/Tbar.js.
Check Firebug or the Chrome Developers Tools for errors, especially network errors. If you're using the dynamic loader (and it appears you are) then the first set of errors you'll need to fix are those. Make sure every file you expect to see loaded is indeed loaded.

28 Dec 2011, 7:03 AM
I appreciate the support. Am trying these changes.