ExtJS 2.3/3.0 定製你所需要的模塊

很實在的一個需求,就是我們只需要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)輸出的文件樹如下:

 

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

 

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);
}