How do you arrange all your javascript files? [Archive]

caesarloh

21 Jun 2009, 7:46 PM

How do you all actually arrange all your javascript files? I find it a bit messy when I have to code everything in 1 single javascript. It rather hard to change when the users want to make some changes.

I was trying and thinking along of the lines when i do a simple naming convention like:

myJavaScript_CentrePanel.js,
myJavaScript_NorthPanel.js,
myJavaScript.js

when myJavaScript.js will contain the Ext.onReady() function.

But somehow I can't get my centrePanel through a function, getCentrePanel();

So, does anyone have anything other ideas on how to arrange the javascript files?

umarkashmiri

21 Jun 2009, 8:07 PM

Hey,

Are you sure, you are placing your files after the debug-all.js or base.js files

umarkashmiri

21 Jun 2009, 8:08 PM

Hey,

Are you sure, you are placing your files after the debug-all.js or base.js files

Umar Kashmiri
SE,CTO 24/7
Pvt.Ltd,Pakistan

caesarloh

21 Jun 2009, 9:44 PM

Yes, I did put my javascript after the debug-all.js/base.js. But, it was another silly mistake that cause the getCentrePanel to fail.

umarkashmiri, how do you arrange all your javascript? Is there any Ext JS convention on how to keep everything neat and tidy??

VinylFox

22 Jun 2009, 3:03 AM

when myJavaScript.js will contain the Ext.onReady() function.

But somehow I can't get my centrePanel through a function, getCentrePanel();

Sounds to me like your having a scope issue by enclosing all of your code within onReady within each file. It's ok to define your functions/classes outside of the onReady, and simply call them within it.

Just a guess on that - it would help if you posted your code somewhere we could take a look.

Your headed in the right direction by splitting up your JavaScript into separate files - keep it up. I typically split up separate classes into each file, but remember to combine them using something like JSBuilder when you go to production.

makana

22 Jun 2009, 5:34 AM

Hey caesarloh!

I place my files like this:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SomeTitle</title>

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="yourCustomCSS.css">

<script language="JavaScript" type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/ext/locale/ext-lang-de.js"></script>
<script language="JavaScript" type="text/javascript">
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
</script>


<script language="JavaScript" type="text/javascript" src="someFile.js"></script>


<script language="JavaScript" type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>

To your getCenterPanel-function:
just define

var getCenterPanel = function() {
return new Ext.Panel({
...
});
};

If you have only such functions in your included js-files and you call them in Ext.onReady(), the order of your custom js-files doesn't really matter.

If you want to create new class instances before Ext.onReady() is called, you have to make sure, that you include all necessary files before the instantiation.

I call the Ext.onReady() function only one time in index.js. This is always the last file I include.

Hope that helps!

umarkashmiri

22 Jun 2009, 9:44 PM

Hey caesarloh!

I place my files like this:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SomeTitle</title>

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="yourCustomCSS.css">

<script language="JavaScript" type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/ext/ext-all-debug.js"></script>
<script language="JavaScript" type="text/javascript" src="lib/ext/locale/ext-lang-de.js"></script>
<script language="JavaScript" type="text/javascript">
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
</script>


<script language="JavaScript" type="text/javascript" src="someFile.js"></script>


<script language="JavaScript" type="text/javascript" src="index.js"></script>
</head>
<body>

</body>
</html>

Yes Makana is right.
but one thing more. if u have extended some of ur controls or u override some of general control properties then put them into one file and include this file just right below the lang.js file

the best way that i use in asp.net was that i made a header page inwhich i include all of these files in same order and i include this page in every page and write every page javascript in each page.

I did it only because if u put all of the functions and ext code in one file and reuse it then approximately 800-900kb javascript is loaded with every page.so i suggest to write JS in every page.
you can use more than one onready... thats not the problem. but every thing has a scope....remember this

Good luck

Umar Kashmiri
SE,CTO 24/7
Pvt.Ltd,Pakistan

caesarloh

22 Jun 2009, 10:10 PM

So, the rough idea is to have all the defaults files declared first, then the custom files and lastly the file that contain the Ext.onReady().

What about layout organising?

So far, the easiest way for me to categorise and organise stuff is name it this way

myJavascript_NorthPanel.js
myJavascript_CenterPanel_GridPanel.js
myJavascript_CenterPanel_TabPanel.js

where each file will contain the respectively panel.

The good things about this way is I can easily find where are my codes and isolate them. As for the cons, I haven't really encounter one yet.

Does anyone have any comments on it?

umarkashmiri

22 Jun 2009, 10:25 PM

So, the rough idea is to have all the defaults files declared first, then the custom files and lastly the file that contain the Ext.onReady().

What about layout organising?

So far, the easiest way for me to categorise and organise stuff is name it this way

myJavascript_NorthPanel.js
myJavascript_CenterPanel_GridPanel.js
myJavascript_CenterPanel_TabPanel.js

where each file will contain the respectively panel.

The good things about this way is I can easily find where are my codes and isolate them. As for the cons, I haven't really encounter one yet.

Does anyone have any comments on it?

yes its true, if u wanna do so then remember one phrase
"To get milk u need a pot"

i hope u got it

Umar Kashmiri
SE,CTO 24/7
Pvt.Ltd,Pakistan