PDA

View Full Version : Build your own ExtJS 3.X



dgv_7
27 Feb 2010, 8:15 AM
I want to build smaller web aplications using ExtJS, but I'm stuck with the size of the main files.

How can I build a smaller ext-all.js ?
Is gonna be available "Build your own 3.X?

Thanx.

DGV

fay
27 Feb 2010, 8:21 AM
Answered several times - http://www.extjs.com/forum/showthread.php?t=89399 (http://www.extjs.com/forum/showthread.php?t=89399&highlight=jsbuilder) - search for JSBuilder and you'll see how to do it manually in Ext 3.x.

dgv_7
27 Feb 2010, 8:46 AM
Answered several times - http://www.extjs.com/forum/showthread.php?t=89399 (http://www.extjs.com/forum/showthread.php?t=89399&highlight=jsbuilder) - search for JSBuilder and you'll see how to do it manually in Ext 3.x.

Thanks, Fay

I'll learn how to do it.

DGV

dgv_7
15 Mar 2010, 6:57 AM
I just can't get it working right... :((
I've made a big mess trying and always seem to be too much stuff or missing some code

Am I the only missing the app "Build Your Own" for Ext 3.X??

Thanks.

Condor
15 Mar 2010, 7:43 AM
Here are some more pointers (http://www.extjs.com/forum/showthread.php?t=74274) on how to use JSBuilder2.

Greendrake
15 Mar 2010, 8:02 AM
Am I the only missing the app "Build Your Own" for Ext 3.X??
I wrote a simple script listing all the files you need to include to have a particular package. To build your own version, you just go through the list and eliminate everything you don't need. The script is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext Pack</title>
<script language="JavaScript" type="text/javascript" src="extpack.js"></script>
<script language="JavaScript" type="text/javascript">
var packer = function(pack){
this.pack = pack;
};
packer.prototype = {
added: {},
buildList: function(name){
var p = this.getPackage(name),
files = p.fileIncludes,
deps = p.pkgDeps,
path,
out = [];
for (var i = 0, l = files.length; i < l; i++ ) {
path = files[i].path + files[i].text;
if (!this.added[path]) {
out.push(path);
this.added[path] = true;
}
}
if (deps) {
for (var i = 0, l = deps.length; i < l; i++ ) {
if (!this.added[deps[i]]) {
out = out.concat(this.buildList(deps[i]));
this.added[deps[i]] = true;
}
}
}
return out;
},
getPackage: function(name){
var p = null;
for (var i = 0, l = this.pack.pkgs.length; i < l; i++ ) {
if (this.pack.pkgs[i].name == name || this.pack.pkgs[i].file.substring(this.pack.pkgs[i].file.length - name.length) == name) {
p = this.pack.pkgs[i];
break;
}
}
return p;
}

};
var list = ((new packer(pack)).buildList('Ext Base')).concat((new packer(pack)).buildList('Ext All'));
//var list = ((new packer(pack)).buildList('Ext All CSS No theme')).concat((new packer(pack)).buildList('Ext Gray Theme'));
for (var i = 0, l = list.length; i < l; i++ ) {
document.write(list[i] + '<br/>');
}
</script>
</head>
<body></body>
</html>

The extpack.js file above is just the ext.jsb2 file with 'var pack = ' added at the beginning.

Once you're happy with your file list, you may combine them into a build.

Mike Robinson
15 Mar 2010, 9:18 AM
It does seem to me that, as ExtJS continues to grow (larger), the team needs to think more about what are logical subdivisions of the code. For example, if my app does not need "charts" and never will, it ought not have to load the "chart" code into memory. If I don't use XML stores, I don't have to load them.

Let's call these logical divisions of code, "packages." ExtJS now consists (internally) of a "core" package that is always loaded, and one or more optional packages.

A script could be supplied, for use instead of the standard ExtJS script, which is in effect a "bootstrap loader" that works off a string that specifies the "packages" that are desired. It works by loading the correct sub-scripts (one or more per package) in the correct sequence, whatever that "correct sequence" might be.

The ExtJS team is responsible for building and maintaining the bootstrap-loader. Therefore, the team solely controls what file-names are loaded and in what order.

The bootstrap-loader script would be (except for the user-supplied code that specifies the packages string) a "drop-in replacement for" the existing all-in-one ExtJS script. The onus is entirely upon the end-user software designer to specify the correct features for whatever application he is attempting to build in this way. If you attempt to use something that isn't in a package that you called for, then "your app won't work, and don't call us to whine about it."

This would provide the essential "roll your own" functionality that people are calling for, but it would move the task of subdividing a monolithic ExtJS back into the hands of the people who designed and built it. And because it would be "official," it would be something that the team could reliably test.

As ExtJS continues to grow in megabytes, this is a bridge that you will have to cross. This baby is big enough now, that the time to plan for its college-education is at hand.

dgv_7
15 Mar 2010, 1:12 PM
Here are some more pointers (http://www.extjs.com/forum/showthread.php?t=74274) on how to use JSBuilder2.

I guess Mike is right... It may grow larger and larger and we'll have to learn how to deal with that...

Thanks, friends.
I'll dig into that.