View Full Version : Calling multiple MVC apps from an MVC app (how to?)

16 Dec 2013, 7:44 AM
I am attempting to build a portal-style environment in Sencha 4.2.1, wherein a MVC portal app will have a border layout with a navigation menu button. The menu button will contain the data needed to launch/call other MVC apps which need to be displayed in a dynamically added tab inside the center region of the border layout.

I can get the tab to create in the viewport and I see in the console where it is attempting to load the html from the app being requested, but it crashes during the load and also loads on top of the current portal app rather than inside the tab.

How can MVC apps call other MVC apps and/or How can an MVC app have "child" MVC apps per say??

Portal Controller Code snippet:

Ext.define('Portal.controller.Main', {
extend: 'Ext.app.Controller',
refs: [{
selector: 'viewport',
ref: 'Viewport'

init: function() {

'#vp-north-button1': {
testbutton1: this.onTestbutton1

onTestbutton1: function() {
var vp = this.getViewport().down('#center-region');
layout: 'fit',
closeable: true,
title: 'added',
plain: true,
itemId: 'added1',
items: [{
loader: {
url: '/internet/rvi/imageinquiry/app/index.html',
autoLoad: true,
scripts: true,
contentType: 'html',
renderer: 'html'

Kevin Jackson
19 Dec 2013, 11:54 AM
I'm not sure I understand. You said it crashes but loads the data in the wrong area. Could you clarify pleaase?

19 Dec 2013, 12:04 PM
It sounds like you have multiple Ext.container.Viewport it is easier if your other apps use a Panel as the main view.

I got something similar working for my company.

I can't go into details but might be able to help with some of the tricky parts of it.

Let me know. :)


19 Dec 2013, 12:43 PM
@Kevin.. not exactly.... what I said was that I see in the console chrome network tab that all the javascripts are being loaded and attempt to run, then it blows and gives a variety of errors such as:[E] Ext.AbstractManager.register(): Registering duplicate id "vp-main" with this manager ext-all-dev.js:12297Object ext-all-dev.js:12303console.trace() ext-all-dev.js:12309Uncaught Ext.AbstractManager.register(): Registering duplicate id "vp-main" with this manager ext-all-dev.js:11401Uncaught TypeError: Object prototype may only be an Object or null ext-all.js:18Uncaught TypeError: Object [object Object] has no method 'addCls' ext-all.js:189Uncaught TypeError: Object [object Object] has no method 'findParent' ext-all.js:18One things I did change was to take out the loader:{..} (see above snippet) and replace it with autoEl: {tag: 'iframe',style: 'height: 100%; width: 100%; border: none',src: '/internet/rvi/imageinquiry/app/index.html'}In doing so, I no longer got any errors and the called app in the src statement did load and run, however, I lost the original viewport (or so it seems). I could not see it anymore and the called app was not in a tab... which leads me to believe Ron's comments are on target.... @Ron.. I think you're on the right track. What I have is multiple stand alone MVC apps. All these apps were designed over time and all work great. Now we are wanting to have a "portal" wherein a Menu can call/load any of these apps.. Rather than the portal being a simple web page with url links that will launch a new browser window to run the app, we want the app to run inside of this "portal" window/browser in dynamically created tabs.The "tricky part" as you call it is an understatement...lol.. I am clueless on how one MVC app could run another MVC app inside itself... Just doesn't seem like it would be that tricky... but,,, it is!!! I've spent a week trying things with hardly any progress. Any clues, hints, recommendations would be a very appreciated!

19 Dec 2013, 2:57 PM
I'll try to explain without giving too many details because I'm locked into agreements with my company.

We have our main viewport and menu that controls everything.

Single Sencha App with Ext.Application thats center area loads multiple other controllers that control their own views/panels and only adds them to our center region that is using a card layout.

We use the controller domain to communicate between controllers and their assigned views.

We don't use an iframe to load the other apps as that gets into more of a headache.

We do have one controller/view that uses Ext.ux.IFrame to load our older webpages from before Ext was born into the center region.

Think of it this way you have a Global MVC that controls other App MVC's in a centralized region.
1 global application, 1 global controller, 1 global viewport, and 1 global menu to control everything else.

Without seeing more code of how your trying to do it I can't help as much but give this description of how we are doing it. And I'm sorry it is kinda vague I am stuck between a rock and a hard place. :D


20 Dec 2013, 5:34 AM
Yes, that's what I'm looking to do. One Global MVC app to control everything else without having to change any existing code in any of the apps. I know it can be done. Hard to believe there's no samples anywhere out there. Haven't found one that has come close.

20 Dec 2013, 8:05 AM
If your using multiple Viewports you can't do this.

As a viewport attaches to the Body and uses all available viewable space.

Where as if you only have a single Viewport with the other apps using Panels instead then everything gets along on the screen.

23 Dec 2013, 5:28 AM
Actually, yes you can. I have a product that does exactly what I want to do. I just need to figure out how they did it so I can do it myself.