View Full Version : Panel.load method and js

7 Jul 2010, 4:26 AM

I was wondering if i could load scripts as below into a new panel using the panel.load() method.

<script type="text/javascript" src="ScriptA.js />
<script type="text/javascript" src="ScriptB.js />
<script type="text/javascript" src="ScriptC.js />

I know that its possible to run inline scripts but I'm struggling with scripts in external files.

Thanks in advance.

7 Jul 2010, 5:12 AM
panel.load({url: '...', scripts: true});

But this is almost always the wrong approach. What exactly are you trying to accomplish?

7 Jul 2010, 5:26 AM
Thanks for the reply condor...yes i was a bit vague. What I am trying to do is create stand alone widgets that can be included in another website on the same domain. The idea is to be able to reuse the same widget without copying code but just specifying a url. So we have one website which is essentially a library of widgets.

Then we have another ext js web app in this app we may have a panel which we want to populate dynamically with a specific widget from the first. This could be done as below.

Ext.onReady(function() {
var panel = new Ext.Panel({
title: 'Container for exteneral widget',
width: 500,
height: 400


url: 'http://localhost/WebApp2/Research/Widget',
params: { param1: 'foo', param2: 'bar' }, // or a URL encoded string
scripts: true


I expect the response to this request to provide a few js scripts as below

<script type="text/javascript" src="http://localhost/Script1.js"></script>
<script type="text/javascript" src="http://localhost/Script2.js"></script>
<script type="text/javascript" src="http://localhost/Script3.js"></script>
<script type="text/javascript" src="http://localhost/Script4.js"></script>

Together these scripts create some kind of widget. Script4.js might be a kind of initialise script that creates the widget from the js objects it downloaded. Is this possible?


7 Jul 2010, 5:29 AM
Are these widgets Ext components? In that case you should really consider using the LiteRemoteComponent plugin user extension instead of autoLoading.

7 Jul 2010, 5:34 AM
Yes they are ext components...I looked briefly at using the LiteRemoteComponent I wasnt sure if it handled the loading of scripts as i have specified. I'll have another look.


By the way, i have used
panel.load({url: '...', scripts: true});

...in other projects....whats wrong loading objects this way. (Not that this is applicable in this case).

7 Jul 2010, 5:38 AM
Also. its looks as if LiteRemoteComponentcan only be used to load .json configuration. I need the actual objects and configuration to exist entirely externally.

7 Jul 2010, 6:02 AM
No, LiteRemoteComponent doesn't load JSON, it loads javascript, so it could also load:

var store = new Ext.data.Store({
url: 'abc.jsp',
fields: ['field1', 'field2']
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'Field 1', dataIndex: 'field1'},
{header: 'Field 2', dataIndex: 'field2'}
return grid;

7 Jul 2010, 6:05 AM
yes i understand that but i need it to be able to load

<script type="text/javascript" src="http://localhost/Script1.js"></script>
<script type="text/javascript" src="http://localhost/Script2.js"></script>
<script type="text/javascript" src="http://localhost/Script3.js"></script>
<script type="text/javascript" src="http://localhost/Script4.js"></script>

7 Jul 2010, 6:16 AM
Why four different .js files?

- If the .js files contain custom component definitions then use the Ext.Loader (as described above).
- If the .js files contain initiated components then use LiteRemoteComponent.

7 Jul 2010, 6:18 AM
Well it will be 4 files for development/debugging. but the release build will be just a single js file.

What do you mean by initiated components? can you give me an example?

What I am downloading is javascript object which i then initialise. Surely you cant download an initiated component. I dont understand the difference between the 2 options you give above?

7 Jul 2010, 6:29 AM
But if you are debugging dynamic loading, then I would recommend to concatenate the .js files into one file (but skip minification) even for debugging!

7 Jul 2010, 6:35 AM
Yes i could do that. But as recomended by various ext users including Animal i like to build my javascript in reusable blocks. For example my grid might need to be used across many different widgets. The grid itself is a stand alone component.

Anyway..can you elaborate on your previous post as to when you would use the Ext.Loader and when you would use RemoteComponent.

Also. Ext.component RemoteComponent doesnt handle the downloading of references to js files. Only raw js itself which I do not want to do.

7 Jul 2010, 6:56 AM
Ofcourse, but that is why you have IDE plugins that help you with concatenation and minification.

Simply edit the original source files and let the plugin automatically build the concatenated file that you use for testing/debugging.

7 Jul 2010, 7:02 AM
OK. I suppose i do this. I still cannot render the raw html. I will have a single javascript from my panel.load call i get

<script type="text/javascript" src="Script.js"></script>

...as my returned string. I need to add this to the head. Is this possible?

7 Jul 2010, 7:05 AM
You really shouldn't use panel.load() for that.

Try the Ext.Loader instead (see earlier post).

7 Jul 2010, 7:11 AM
ok....how do i use the Ext.Loader.

"Ext.Loader is undefined"

sorry, if thats a rubbish question. cant find any info on it.

7 Jul 2010, 7:19 AM
Ext.Loader is not part of ext-all.js. You have to include ext/src/ext-core/src/core/Loader.js separately.


Ext.Loader.load(['Script1.js', 'Script2.js', 'Script3.js', 'Script4.js'], function(){
// called when done
}, scope, true);

7 Jul 2010, 7:36 AM
OK thanks.

Thats part of the way towards what i am after, I'm desperatly trying to avoid using iframes here.

The widgets can be both html and js. They also need to be configurable on the server.

I think the only answer is to use iframes or to build a communication object which can be interpreted on the client. for example

I could use the RemoteComponent object and return json such as

js: [file1.js, file2.js, file3.js],
html : <somehtml>,
config : {configObj}
setupFn : 'functionName'

I could then use the Loader as above to load the jsfiles/jsfile, append the html and then initialise the js object with the specified config.

So there would be a maximum of 2 requests(assuming a single js file). Which is probably better than using iframes.

Any thoughts? By the way this is a .net MVC application. Once the widgets are loaded and initialised they we be talking to the mvc object to get/set data.

7 Jul 2010, 8:53 AM
Message removed

7 Jul 2010, 10:37 PM
Why do you need separate HTML? And if you really do, why not make the loaded component load the extra HTML?

8 Jul 2010, 12:12 AM
Why do you need separate HTML? And if you really do, why not make the loaded component load the extra HTML?

Not all of the widgets will necessarily be ext js so i want to keep my options open

8 Jul 2010, 1:02 AM
Maybe autoLoading is the best solution for you then.

The only drawback is that loaded Ext components are not part of the layout, so they are not resized when the container changes size and they are not destroyed when the container is destroyed, creating a sometimes huge memoryleak.

8 Jul 2010, 2:31 AM
Maybe, I quite like this loader though. I have a working prototype. Needs some refining but i think it works pretty well.

Thanks for your advice...(it would be nice if they had a stackoverflow style up down voting on this board).