How to have no iframes??

[thejdog]

Animal mentioned in another post that using iframes isn't the best because it has to load the huge extjs-all.js file each time.

I just can't seem to figure out how to have all my "programs" in separate files. Say for example:

layout.js
stats.js
members.js
promotional.js

Now each of them look like so:



programName = function () {

ALL THE FUNCTIONS VARIABLES

return {
init:function() {
initiation function stuff here
}
}
}


Now if the original program starts the layout and initial "landing" page. So it calls out the:



Ext.onReady( layout.init, layout );


How you you execute the code in the other parts of the application? I've been trying to figure this out for a while now.

[mystix]

this tutorial by saki might help:
http://extjs.com/learn/Tutorial:Application_Layout_for_Beginners

[fangzhouxing]

How you you execute the code in the other parts of the application? I

you can execute other js's init public method in the layout.init.

[thejdog]

I guess the question is, would I want to include ALL of the javascripts I'll need through out the application?

And the namespace, would it be the same namespace in each of the files, or should I only define that once?

[fangzhouxing]

I guess the question is, would I want to include ALL of the javascripts I'll need through out the application?

And the namespace, would it be the same namespace in each of the files, or should I only define that once?

I provide current design in my project:

1.I use iframe to execute each mini-application user selected from main menu(one iframe to one tabPanel).

2.In each iframe, I tend to include ALL of the javascripts file in one jsp/html file(see code), and use same namespace. In some cases, I use iframe again to load other mini-application.



<!--{{{ js -->
<%@ include file="/app/common/js.inc" %>

<script src="<%=contextPath%>/app/basis/common.js"></script>
<script src="<%=contextPath%>/app/basis/track/main.js"></script>
<script src="<%=contextPath%>/app/basis/track/project.js"></script>
<script src="<%=contextPath%>/app/basis/track/element.js"></script>
<script src="<%=contextPath%>/app/basis/track/component.js"></script>
<script src="<%=contextPath%>/app/basis/track/component-form.js"></script>
<script src="<%=contextPath%>/app/basis/track/milestone.js"></script>
<script src="<%=contextPath%>/app/basis/track/milestone-form.js"></script>
<script src="<%=contextPath%>/app/basis/track/version.js"></script>
<script src="<%=contextPath%>/app/basis/track/milestone-with-version.js"></script>
<script src="<%=contextPath%>/app/basis/track/milestone-without-version.js"></script>
<script src="<%=contextPath%>/app/basis/track/version-form.js"></script>
<!-- }}} -->


The advantages of this design are:
1.debug each mini-application is easy(you just close the iframe tab, and reopen it to use new modified programe).
2.each mini-application is independent of eachother, and avoid namespace conflict.

Sorry for my poor english, wish above design method helps!