ExtJS 2.3/3.0 定制你所需要的模块

ExtJS 2.3/3.0 定制你所需要的模块

关键字: extjs 定制 jsbuilder2 build_your_own_ext js

很实在的一个需求,就是我们只需要extjs的一部分功能,不想把整个类库都包含进来.

 

所以让我们来定制extjs吧~

 

 

1. ExtJS 1.1.1或2.3.0

 

可以用官方的在线工具来定制:http://extjs.com/products/extjs/build/

 

使用教程:

e文:http://extjs.com/learn/Tutorial:Building_Ext_From_Source

中文:http://extjs.org.cn/node/364

 

2. EXTJS 3.0

 

现在还没有在线版,可以通过以下方法来自己定制:

 

1. 下载Ext 3.0.0 SDK. http://extjs.com/products/extjs/download.php?dl=extjs3
2. 下载JSBuilder2. http://extjs.com/products/jsbuilder/  
3. 下载Ext 3.0.0的ext.jsb2文件   http://extjs.com/forum/showthread.php?p=354473  

4.  把JSBuilder2解压jar到extjs根目录下,ext.jsb2也放到根目录下

5.  用你的文本编辑器编辑ext.jsb2文件,仅保留你需要的模块

6.  jsb2文件中的deployDir: 'ext-3.0.0-build'表示相对输出目录

7.  cmd,切换到ext根目录下,执行:

 

G:/Learning/Web/Javascript/ExtJS/ext-3.0.0> java -jar "JSBuilder2.jar" -p ./ext.jsb2 -d ./ 

 

8.等待刷屏完毕后去你在jsb2中指定的目录下找输出吧.

 

 

3.试验

一个试验的例子,仅包含Tree组件,如附件

 

1) resource部分未作过滤

2) 注意依赖关系,如

        name: 'Trees',
        file: 'pkgs/pkg-tree.js',
        isDebug: true,
        pkgs: ['pkgs/cmp-foundation.js']

 

3)输出的文件树如下:

 

adapter/
|--ext/
|----ext-base.js
|----ext-base-debug.js

pkgs/
|--cmp-foundation.js
|--ext-foundation.js
|--pkg-tree.js
|--cmp-foundation-debug.js
|--ext-foundation-debug.js
|--pkg-tree-debug.js

resources/
license.txt

 

 

2009-08-25更新:

extjs3.0的一种简化的提取方式,就是官方本身已经压缩过一次了,看pkgs目录下有很多文件.

然后再看jsb2中提到的依赖,来提取就OK了,如tabpanel是:

{
  name: 'TabPanel',
   file: 'pkgs/pkg-tabs.js',
   isDebug: true,
   pkgs: ['pkgs/cmp-foundation.js'],
   fileIncludes: [{
     text: 'TabPanel.js',
     path: 'src/widgets/'       
  }]   
}
如果你只用tab,不用其他的,那试着只引入pkgs下的
cmp-foundation.js和pkg-tabs.js