This is what I do.
I have a tree on the left region to be used as a menu. The tree is built based on a JSON object. Each node has some configuration info to be used to decide what to do when the user clicks it (actually is a key to index a configuration structure). The normal behaviour in response to a tree click is adding a tab to the center region and loading an HTML fragment into it. The fragment is always like this:
Code:
<style>/* optional style */</style>
<div class="fragment" id="fragment-whatever">
<!-- some stuff here -->
</div>
I do not load any javascript code with the fragment. All my code is loaded at startup time in a single javascript file. Every HTML fragment has an associated javascript class. After the fragment is loaded into the tab, I instantiate an object of the associated class. The configuration structure maintains the url of the fragment, the layout of the panel to create, the javascript class name associated, and other informations.
One thing you may want to consider is a naming scheme for your tag ids and CSS selectors so that different fragment do not interfere with each other. Sometime I get a reference to a DOM element in the fragment selecting by class name, but usually I assign to every fragment a unique prefix that I use for all the ids of that fragment. This however has to be tweaked a little if you have multiple copies of the same fragment loaded in different tabs at the same time.
Anyway the Ext 2.0 API application, has already much of this code.
Luca