`
atian25
  • 浏览: 468814 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

 

分享到:
评论
7 楼 telyy123 2011-08-05  
帅哥,能留下qq不?关于定制的问题,需要亲自请教一下
6 楼 atian25 2010-07-26  
y1d2y3xyz 写道
我不知到你是怎么做的,按照你tree的步骤根本不能实现,还希望楼主能给我DEMO演示,我目前正需要EXT的这棵树,可惜按你的意思高了好多次都失败,报错,悲剧啊,



在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);
}
5 楼 y1d2y3xyz 2010-07-22  
我不知到你是怎么做的,按照你tree的步骤根本不能实现,还希望楼主能给我DEMO演示,我目前正需要EXT的这棵树,可惜按你的意思高了好多次都失败,报错,悲剧啊,
4 楼 daxiong921 2009-11-20  
朋友,我只想用Message,可是按照您的方法没有用呀?
我导入了cmp-foundation.js和window.js不行哦
3 楼 atian25 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
2 楼 zhangdaiping 2009-08-21  
这个好。。。一直想找个3.0定制的方法
1 楼 peacock 2009-08-15  
太帅了,还不知道可以这样手工操作

相关推荐

    extJS3.0完整包

    extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0 extJS3.0

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

    extjs3.0 ext3.0 ext文档 ex例子

    extjs3.0 ext3.0 ext文档 ext例子

    ExtJS 2.3 all

    ExtJS是一个Ajax框架,是一个用javascript写的,用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用.ExtJS主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。...

    extjs-core 3.0 beta版

    extjs-core 3.0 beta版extjs-core 3.0 beta版SDK extjs-core 3.0 beta版extjs-core 3.0 beta版

    extjs+dwr3.0实现文件上传

    在“EXTJS+DWR3.0实现文件上传”这个主题中,我们将探讨如何结合这两者来实现一个高效且用户友好的文件上传功能。在实际的Web应用中,文件上传是一个常见的需求,例如在社交媒体平台上传图片、在文档分享网站上传...

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    页面组件示例中心可能包含了一系列EXTJS3.0的组件演示,包括树形组件的实例,你可以通过这些实例学习如何在实际项目中使用和定制EXTJS3.0的树组件,提升你的前端开发能力。 总结来说,EXTJS3.0的树形组件提供了一种...

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    EXTJS3.0中文API (离线)

    在使用EXTJS 3.0中文API.CHM时,开发者可以通过搜索功能查找所需的方法或类,理解其用法和参数,加快开发进程。"下载说明.htm"可能是关于如何获取和安装这个API文档的指南,而"readme.txt"通常包含了额外的信息,如...

    extjs3.0 组件

    EXTJS 3.0 版本是其历史上的一个重要里程碑,提供了丰富的组件库和强大的功能,为开发人员提供了构建复杂Web界面的能力。在这个课程中,我们将深入探讨EXTJS 3.0 的核心组件,这些组件是构建用户界面的基础。 首先...

    EXTJS3.0登陆DEMO

    EXTJS3.0登录DEMO是一个基于EXTJS框架的示例项目,展示了如何将EXTJS与STRUTS2、SPRING和IBATIS等流行Java技术整合,构建一个完整的Web应用程序。EXTJS是一个用于创建富客户端界面的JavaScript库,而STRUTS2、SPRING...

    extjs3.0开发包含示例api

    EXTJS 3.0是一款基于JavaScript的开源UI框架,它为Web应用提供了丰富的组件和功能。这个开发包包含了EXTJS 3.0的核心API、示例代码和源文件,是学习和开发EXTJS应用程序的重要资源。 一、EXTJS 3.0 API EXTJS 3.0的...

    Extjs3.0 中文API帮助文档

    Extjs3.0中文API文档 够详细 够详细 够详细

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    4. **安装ExtJS支持**: 在Spket中,需要为ExtJS 3.0添加支持。这通常涉及到在IDE中导入ExtJS的库文件,并配置相应的代码助手和自动完成。 5. **创建项目**: 创建一个新的Spket项目,然后将你的ExtJS 3.0代码文件...

    extjs3.0 API 中英

    ExtJS是一个基于JavaScript的用户...总之,无论你是初学者还是经验丰富的开发者,拥有这两份API文档都将极大地提升你在ExtJS 3.0开发中的效率和质量。记得在实践中不断查阅和运用,才能更好地掌握这个强大的前端框架。

    ExtJS 3.0 API 文档离线包

    此“ExtJS 3.0 API 文档离线包”包含了所有开发者需要了解的关于3.0版本ExtJS框架的详细信息,以便在没有互联网连接的情况下进行学习和开发。 API文档是任何开发工具的核心部分,它提供了一个清晰的指南,解释了库...

    extjs.3.0中文API

    综上所述,ExtJS 3.0中文API为开发者提供了详尽的文档,涵盖了从基础组件到复杂交互的全部内容,对于构建高性能、响应式的Web应用具有极高的价值。通过深入学习和实践,开发者可以利用这些API创建出高效、美观且易于...

    ExtJs+3.0+最新最全中文API帮助文档

    ExtJs+3.0+最新最全中文API帮助文档+CHM版@156_25590.exe

    extjs3.0框架

    ExtJS 3.0框架是Sencha公司推出的一款基于JavaScript的富客户端开发...不过,需要注意的是,ExtJS 3.0已经相对老旧,最新的版本为ExtJS 7.x,其中包含了许多性能优化和新功能,对于新项目,建议考虑使用更现代的版本。

Global site tag (gtag.js) - Google Analytics