I'm working with two project with ~20 sub-SA projects, and the numbers are still increasing. We call them modules, and we try to keep each module small. Of our two projects, one is tab panel based and the other one is window based.
For the tab panel based project. We have a border layout viewport, we have a tree menu on the west, and tab panels on the east. But the tab panels are empty. Whenever a tab panel needs to be activated and displayed on the east tab panel area, we use an iframe inside the tab panel to load other modules, which are actually other SA projects. The code for the iframe may look something like this:
Code:
{
xtype: 'panel',
layout: 'fit',
html: '<iframe src='+some_url+' width=100% height=100% border=0 />'
}
For the window based project, we use iframe, too. The mechanism essentially is similar, however, with the only thing to note that we don't use html as what we used in the tab panel based project. The reason is the events in the iframe seem not to be bubbled up to the enclosing container, so if windowA is partially on top of windowB, and the windowB will not be brought to the front if you click on the inner area of windowB. Fortunately an iframe ux in the example/ux folder solves this problem nicely. So we use it. I'm not going to talk in detail about the iframe ux. If you are interested in that, you may refer to the ext document or Google, or request me to provide some sample code in our project.
How do the enclosing and enclosed iframe windows to communicate? Let the code answer this question:
child -> parent:
Code:
window.parent.document.getDocumentById('dom_id');
parent -> child:
Code:
var ifrm = document.getElementById('my_iframe');
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
var my_dom = ifrm.document.getDocumentById('dom_id');
The only drawback is you have to explicitly use id instead of itemId, which might be what you avoid doing normally.