putting Ext inside a sub-namespace [Archive]

kangaroo

24 Aug 2008, 6:40 AM

I'm building a simple app that people will add to their web pages. Some of these web pages may use Ext, so I want to protect my use of Ext by putting inside of my app's namespace. This way, if my version of Ext is different from whatever is loaded in the host page, they do not conflict.

What is the best way to do this?

I can imagine two ways:

a) massively edit my copy of extjs so that all the Ext declarations become myapp.Ext

b) do something in the initialization of my app that loads Ext inside of it -- is there some Ext foo for this already?

Is there another?

Thanks!

Kanga

evant

24 Aug 2008, 6:47 AM

I guess it depends on the scenario, but could you just check for the existence of Ext first?

if (Ext)
{
//continue
}
else
{
//load, or redirect to a version where Ext is included.
}

Animal

24 Aug 2008, 6:52 AM

Foo = { Ext: Ext };
delete window.Ext;

kangaroo

24 Aug 2008, 7:06 PM

Thank you for the ideas.

I think you are saying to do something like the example below, which has two problems.

First, it cannot control the order of loading, so if there is another app in the page that wants to use Ext in its normal place (window.Ext) then this could overwrite that Ext and then move it out of the expected position.

Second, this has errors that appear to imply that Ext itself expects to be able to refer to itself at window.Ext:

Ext is not defined ext-base.js (line 10)
(function(){var B;Ext.lib.Dom={getViewWidth:function(E){return E?this.getDocumen...

Ext is not defined ext-all.js (line 13)
Ext.EventManager=function(){var X,Q,M=false;var N,W,H,S;var P=Ext.lib.Event;var ...

So... I'm thinking that maybe I should lift the couple parts of Ext that I most want in this app, and re-namespace them. While I hate to fork code, that seems to be the only thing practical for using Ext inside an app that does not own the entire window.

Other advice? It would be nice to have a separate utility that would handle loading Ext into a specified namespace. I suppose that might be a feature request --- has it been requested already?

<html>
<head>
<script>
var myapp = {};

// This function is after Ext is loaded below
function do_things() {
alert("onReady fired");
myapp['Ext'] = Ext;
delete(window.Ext);
alert("Ext has been moved into myapp");
}

// This generic utility loads a js file and calls func when it is loaded
var js;
function include_js(file, func) {
var html_doc = document.getElementsByTagName('head')[0];
js = document.createElement('script');
js.setAttribute('type', 'text/javascript');
js.setAttribute('src', file);
html_doc.appendChild(js);

js.onreadystatechange = function () {
if (js.readyState == 'complete') {
func()
}
}
js.onload = func;
return false;
}

if (!(typeof Ext == "undefined")) {
// use the existing Ext functions, such as onReady
// and hope the existing version is not old
Ext.onReady( do_things() );

} else {
alert("dynamically loading Ext");
// Get Ext
include_js("ext-2.2/adapter/ext/ext-base.js", function(){ alert("ext-base.js loaded"); } );
include_js("ext-2.2/ext-all.js", function(){ Ext.onReady( do_things() ); } );
}
</script>
</head>
<body>
</body>
</html>

Animal

24 Aug 2008, 10:39 PM

Yes, a grep looks in order.

mjlecomte

25 Aug 2008, 6:57 AM

Does Doug's MIF help with this at all?