View Full Version : How do I dynamically load Ext JS classes?

Bill M
13 Dec 2012, 9:52 AM

I have a Ext-JS program that I would like to break into components. But, I don't want to go "MVC". Could someone provide me a short snippet of code, or point me at an example, that demonstrates how to load any components you created (i.e. derived of a Panel or Grid Class), physically into your program? I know this involves Ext.Loader.setConfig and Ext.require, but I cannot seem to find a good example.

I've been trying this code from the Ext JS 4 Web Application Development Cookbook:

enabled: true,
paths: {
'Cookbook': 'src/Cookbook'

And then I place this within the Ext.onReady() function:

Ext.require('Cookbook.Vehicle', function() {
var van = Ext.create('Cookbook.Vehicle', 'Ford', 'Transit', 60);

I then get an error about a missing ) after argument list.

Would appreciate help here.

15 Dec 2012, 7:48 AM
For development it is fine to dynamically load classes but for production it will have very bad performance as you have to download a couple hundred files. Browser won't download them all at once, it will usually only have 4 sockets open at any given time.

Bill M
15 Dec 2012, 12:21 PM

But I currently have over 1800+ lines of JavaScript in a single file to construct my GUI. And I don't want to re-architect to support MVC. So I thought the best approach to support future growth of the GUI, was to somehow break the GUI up into Components. Was hoping to find examples that show how to break into Components that would reside in different files (that use Models and Stores). Anyway, with regard to the code I had posted, I had figured the problem out and it had to do with a missing comma.

So I guess you are saying it's best to leave it as one giant file?


13 Feb 2013, 9:41 AM
I know this is an older thread, but did you get an answer?

If you go down the route of multiple files for dev/maintenance, then in your build process minify all the JS files into one file for use in a production environment. Sencha tools has this capability. There are others out there.

Bill M
14 Feb 2013, 7:08 AM
Thanks for the reply. I eventually broke all my code up into Components and derived my own custom classes off of the Ext-JS base classes, putting each in their own file. I had to find out how to do this by doing a lot of Google Fishing off of other people's posts and from looking at some examples posted on YouTube.

I really can't believe that Ext-JS does not post examples of how to do this *Object-Oriented JavaScript* that you really need to get a handle on, to build anything substantial and not a mess, with Ext-JS. They really need to review their examples again.

But thanks for responding. I actually have a more pressing issue now with how to thicken the frame border, and effect the backgrouund color of a DataGrid Cell that has focus, that I can't seem to get an answer on. I posted it on the forum a month or two ago. No answers that work. If you could help with that one it would be great! I am a newbie to Ext-JS and JavaScript.

Thanks again.

14 Feb 2013, 7:14 AM
Here is a link to a very good article on how to style grid row/columns/cells.