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

最新推荐文章于 2025-05-22 10:16:38 发布

最新推荐文章于 2025-05-22 10:16:38 发布 · 211 阅读

文章标签：

#EXT #JavaScript #json #PHP #ViewUI

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何根据项目需求定制ExtJS库的不同版本，包括使用官方工具和手动配置方法，以减少项目加载时间并提高效率。

很实在的一个需求,就是我们只需要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 (或者看文末的附件)

注:现在的ext源码里面已经自带了jsb2文件了

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)输出的文件树如下:

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

2009-07-26更新:

[quote="y1d2y3xyz"]我不知到你是怎么做的，按照你tree的步骤根本不能实现，还希望楼主能给我DEMO演示，我目前正需要EXT的这棵树，可惜按你的意思高了好多次都失败，报错，悲剧啊，[/quote]

在extjs3.2中,tree需要:
<script type="text/javascript" src="../js/extjs/3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../js/extjs/3.2.0/pkgs/ext-foundation.js"></script>
<script type="text/javascript" src="../js/extjs/3.2.0/pkgs/cmp-foundation.js"></script>
<script type="text/javascript" src="../js/extjs/3.2.0/pkgs/ext-dd.js"></script>
<script type="text/javascript" src="../js/extjs/3.2.0/pkgs/pkg-tree.js"></script>

在3.0后,官方的源码中就带有这些pkgs了,不需要jsbuilder来自己生成.

其中,enableDD,containerScroll那几个属性需要的是ext-dd.js,这个在jsb2中确实是没有提到.
但是看报错,一般可以猜出是哪个包,然后引入对应的文件.

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../js/extjs/3.2.0/resources/images/default/s.gif';
  //Ext.chart.Chart.CHART_URL = '../js/extjs/3.2.0/resources/charts.swf';
  //Ext.QuickTips.init();
  testTree();
});

function testTree(){
  var tree = new Ext.tree.TreePanel({
    renderTo:Ext.getBody(),
    title: 'My Task List',
    height: 300,
    width: 400,
    useArrows:true,
    autoScroll:true,
    animate:true,
    enableDD:true,
    containerScroll: true,
    rootVisible: false,
    frame: true,
    root: {
      nodeType: 'async'
    },
    dataUrl: 'check-nodes.json'
  });
  tree.getRootNode().expand(true);
}