ExtJS了解

来源：互联网发布：九九乘法表算法编辑：程序博客网时间：2024/06/08 22:23

Ext资源搜集

1 Ext实例部分：
Extjs2.0之横向Radio经典布局
EXT2.0 下拉树例子
EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
用Ext 2.0 combobox 做的省份和城市联动选择框
EXT.FORM提交后的数据返回
Ext2.0 学习系列(转) ------- Ext Grid （一）
Ext2.0 学习系列 ------- Ext Grid （二）
EXT2.0官方教程中文版

Ext核心代码分析之Function.createDelegate

ext-2.0扩展多选下拉框

extjs 的日期加时间控件

Tutorial:DomQuery Basics(Chinese)

Tutorial:DomQuery v1.1 Advanced

Tutorial:TabPanel Basics (Chinese)

Ext 扩展完全指南

ext中的菜单基本应用

EXT提交服务器的三种方式

2 Ext BUG部分：
解决Ext2 Form表单项的不正确显示问题
解决Ext2.0中ComboBox执行Filter第一次无效的问题

基于ext2.0的含有checkBox的tree

Gird 常见错误

3 Ext 站点部分：
天晓得的专栏
blackant2的专栏
AJAXBBS.NET

4 Ext经文

Ext 数据模型

Ext 2 Overview

Ext架构分析(1)--理解Ext.util.Event

Ext架构分析(2)--理解Ext.util.Observable

Ext架构分析(3)--Widget之父Component：构建器

5 JS经文

函数式JavaScript编程指南

6 Java经文

反射实现 AOP 动态代理模式(Spring AOP 的实现原理)

JdbcTemplate学习笔记

ExtJS2.0开发与实践笔记[0]——初识ExtJS

简短的前言：

随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多或少的增加了我们的学习难度。

为此，我准备在blog中逐步整理学习心得，已备查找需要及看客指正。

什么是ExtJS?

按照Ext开发团队的说法，ExtJS从应用角度上讲是一个用户界面库，而不是一个JavaScript Library。原本作为Yahoo! UI Library(也就是YUI)的扩展而被开发出来，但从1.1版本开始由于支持者的增多，已经得到了必要的扩充，不再依赖于YUI。ExtJS可以与prototype.js和jquery等成熟的js库一起使用，也可以作为单独的应用部署到开发中去，Adobe AIR与iPhone开发工具都提供了对Ext的支持。

就我个人的观点而言，在业务处理上讲ExtJS2.0已非常完备，足以满足绝大多数web表示层应用的需求；但是对于解释执行的javascript来讲性能损耗问题却始终无法避免，因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。

ExtJS并不是一个完全免费的项目，他以普通开源版及企业版共存的方式发行，企业版收费标准如下图：

我们可以通过http://extjs.com/download来获得最新版本的ext框架。

发展简史：

YUI-Ext

「Yahoo! UI Library」的扩展。

Ext 1.0

「Yahoo! UI Library」的扩展，同时也支持prototype.js和jquery等。

Ext 1.1

不再依赖「Yahoo! UI Library」，能够不依赖任何第三方组件而单独使用。

Ext 2.0

极大丰富界面库的一版，还在继续扩充中。

运行效果图：

如何开发ExtJS2.0应用？

针对ExtJS2.0，由于其通过浏览器解释执行，所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件，也可以通过IDE进行调试开发。

目前Eclipse上已经有很多能够支持ExtJS2.0的插件，如Spket等，此处不一一例举。本人在此仅以自己常用的Aptana IDE作为开发平台。

Aptana是一个专注于javascript的开源IDE环境，它提供了丰富的javascript开发及调试资源，本人从0.2版本开始试用，目前最新版本为1.1，我们可以通过http://www.aptana.com/download获得其最新版本。

原始版本的Aptana1.1只支持Ext1.1版本，所幸Aptana论坛有人提供了第三方的升级插件，我们可以通过http://support.aptana.com/asap/browse/STU-547或http://orsox.mocis.at/download.php?list.1进行下载，直接copy到Aptana的plugins文件夹下重启Aptana即可运行。

此时我们可以通过Aptana的[Window]项下[Preference]选项调整Aptana的设置选择支持Ext2.0。

ExtJS2.0的“Hello World”

在Aptana中使用ExtJS2.0，我们至少需要ExtJS2.0中的如下文件：

Adapter文件夹

框架及外部资源适配器，我们需要其中ext文件夹下的ext-base.js文件控制ExtJS全局。

Resources文件夹

一个文件夹，包含了css,image等Ext必须的资源

ext-all.js文件

一个压缩的单文件ExtJS文件集合

实际如下图：

首先，我们在helloworld.js中建立如下内容

/**//**

* 通过Ext输出Hello World,[Ext.onReady是ExtJS所定义的,当页面加载完毕之后,会自动调用

* Ext.onReady]

* @param {Object} ''

* @param {Object} 'Hello World!'

Ext.onReady(function() ...{

//以Ext的alert打印'Hello World!'

Ext.MessageBox.alert('','Hello World!');

});

而后，我们建立helloworld.html文件，内容如下

<html>

<head>

<title>HelloExt</title>

</head>

<body>

"ExtJS的Hello World测试"

</body>

</html>

在Aptana中选择如下图，将自动调用您所选择的浏览器进行测试。

输出运行效果如下图：

怎么样，超级简单，是人就会吧？下一回，我将针对ExtJS的特性开始做深入讲解。

ExtJS2.0实用简明教程》之TreePanel基本使用

在应用程序中，我们经常会涉及到要显示或处理树状结构的对象信息，比如部门信息、地区信息，或者是树状的菜单信息，操作系统中的文件夹信息等。
　　对于传统的html页面来说，要自己实现显示树比较困难，需要写很多的javascript，特别是对于基于Ajax异步加载的树来说，不但涉及到Ajax数据加载及处理技术，还需要考虑跨浏览器支持等，处理起来非常麻烦。ExtJS中提供了现存的树控件，通过这些控件可以在B/S应用中快速开发出包含树结构信息的应用。

　　TreePanel基本使用

　　树控件由Ext.tree.TreePanel类定义，控件的名称为treepanel，TreePanel类继承自Panel面板。在ExtJS中使用树控件其实非常简单，我们先来看下面的代码

Ext.onReady(function(){ var root=new Ext.tree.TreeNode({  id:"root",  text:"树的根"}); root.appendChild(new Ext.tree.TreeNode({  id:"c1",  text:"子节点" })); var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  width:100 }); });

　　代码的第一句使用new Ext.tree.TreeNode类来创建一个树节点，第二句使用树节点的root的appendChild方法来往该节点中加入一个子节点，最后直接使用new Ext.tree.TreePanel来创建一个树面板，要树面板的初始化参数中指定树的root属性值为前面创建的root节点，也就是树根节点。上面的程序执行效果如下图所示：

　　树的节点信息。ExtJS的树控件提供了对这种功能的支持，你只需要在创建树控件的时候，通过给树指定一个节点加载器，可以用来从服务器端动态加载树的节点信息。我们来看下面的代码：

var root=new Ext.tree.AsyncTreeNode({  id:"root",  text:"树的根"}); var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  loader: new Ext.tree.TreeLoader({url:"treedata.js"}),  width:100 });

treedata.js这个url返回的内容如下：

[{        id: 1,        text: '子节点1',        leaf: true    },{        id: 2,        text: '儿子节点2',        children: [{            id: 3,            text: '孙子节点',            leaf: true        }]    }]

执行上面的程序，可以得到一棵异步加载子节点的树，点击“根节点”会到服务器端加载子节点，如下图所示：

　　当然上面的程序是一次性加载完了树的所有节点信息，我们也可以实现让每一个节点都支持动态加载的树，只需要在通过服务器请求数据的时候，每次服务器端返回的数据只只包含子节点，而不用把孙子节点也返回即可。比如把上面treedata.js中的内容改为下面的内容：

[{        id: 1,        text: '子节点',        leaf: false     }]

　　也就是节点树中只包含一个子节点，而该子节点通过指定leaf值为false (默认情况该值为false)，表示该节点不是一个叶子节点，其下面还有指节点。再执行前面的程序，不断点击“子节点”可以得到如下图所示的效果：

　　当然这是一个无限循环的树，在实际应用中我们服务器端返回的数据是程序动态产生的，因此不可能每一次都产生leaf为false的节点，如果是叶子节点的时候，则需要把返回的JOSN对象中的leaf设置为true。如下所示：

[{        id: 1,        text: '子节点',        leaf:true    }]

　　事件处理

　　当然，仅仅能显示一棵树还不够，我们一般还需要在用户点击树节点的时候执行相应的东西，比如打开某一个连接，执行某一个函数等，这就需要使用到事件处理。比如下面的代码：

Ext.onReady(function(){ var root=new Ext.tree.TreeNode({  id:"root",  text:"树的根"}); var c1=new Ext.tree.TreeNode({  id:"c1",    text:"子节点" }); root.appendChild(c1); var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  width:100 }); tree.on("click",function(node,event){  alert("您点击了"+node.text); } ); c1.on("click",function(node,event){  alert("您点击了"+node.text); } );  });

　　执行上面的程序，当用户点击树控件中的任意节点时，都会弹出一个提示信息框，当用户点击c1这个子节点时，会弹出两次提示信息框。因为我们除了指定tree的click事件响应函数以外，另外又给node节点指定单独的事件响应函数。
　　
　　当然，如果只是要实现当点击树节点时跳到某一个指定url的功能则非常简单。看下面的代码：

Ext.onReady(function(){ var root=new Ext.tree.TreeNode({  id:"root",  href:"http://www.easyjf.com",  hrefTarget:"_blank",  text:"树的根"}); var c1=new Ext.tree.TreeNode({  id:"c1",   href:"http://wlr.easyjf.com",   hrefTarget:"_blank",  text:"子节点" }); root.appendChild(c1); var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  width:100 });   });

　　执行程序，点击树节点，将会在浏览新窗口中打开节点中href指定的链接。

《ExtJS2.0实用简明教程》之使用树控件TreeNode

在ExtJS中，不管是叶子节点还是非叶子节点，都统一用TreeNode表表示树的节点。在ExtJS中，有两种类型的树节点。一种节点是普通的简单树节点，由Ext.tree.TreeNode定义，另外一种是需要异步加载子节点信息的树节点，该类由Ext.tree.AsyncTreeNode定义。看下面的代码：

Ext.onReady(function(){  var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:new Ext.tree.AsyncTreeNode({    text:"根节点"  }),  width:100 });  });

　　执行程序，点击树中的“根节点”则会一直发现树会尝试加载这个节点的子节点，由这里没有指定树的加载器，所以“根节点”会变成一直处于加载的状态。如下图所示：

　　对于普通的TreeNode来说，可以通过调用节点的appendChild、removeChild等方法来往该节点中加入子节点或删除子节点等操作。

　　TreeNode与AsyncTreeNode可以同时使用，比如下面的代码：

Ext.onReady(function(){ var root=new Ext.tree.TreeNode({  id:"root",   text:"树的根"  });  var c1=new Ext.tree.TreeNode({  text:"子节点1" }) var c2=new Ext.tree.AsyncTreeNode({  text:"子节点2" }); root.appendChild(c1); root.appendChild(c2);  var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  width:300,  loader:new Ext.tree.TreeLoader({  applyLoader:false,  url:"treedata.js"  }) });  }); treedata.js中的内容仍然是：[{        id: 1,        text: '子节点'     }]

　　执行上面的程序可以得到一棵如下图所示的树：

　　另外要在树以外的程序中得到当前选择的节点，可以通过TreePanel的getSelectionModel方法来获得，该方法默认返回的是Ext.tree.DefaultSelectionModel对象，DefaultSelectionModel的getSelectedNode方法返回当前选择的树节点。比如要得到树tree中中当前选择节点，代码如下：

tree.getSelectionModel().getSelectedNode()

《ExtJS2.0实用简明教程》之使用树控件TreeLoader

对于ExtJS中的树来说，树加载器TreeLoader是一个比较关键的部件，树加载器由Ext.tree.TreeLoader类定义，只有AsyncTreeNode才会使用TreeLoader。看下面的代码：

Ext.onReady(function(){ var loader=new Ext.tree.TreeLoader({  url:"treedata.js" }); var root=new Ext.tree.AsyncTreeNode({  id:"root",   text:"根节点",  loader:loader});  var tree=new Ext.tree.TreePanel({  renderTo:"hello",  root:root,  width:100 });  });

　　首先我们使用Ext.tree.TreeLoader来初始化了一个TreeLoader对象，构造函数中的配置参数url表示获得树节点信息的url。然后在初始化根节点的时候我们使用的是AsyncTreeNode，在该节点中指定该节点的laoder为前面定义的loader。执行这段程序，在点击“根节点”时，会从服务器端指定root节点的子节点信息。

　　TreeLoader严格来说是针对树的节点来定义的，可以给树中的每一个节点定义不同的TreeLoader，默认情况下，如果一个AsyncTreeNode节点在准备加载子节点的时候，如果该节点上没有定义loader，则会使用TreePanel中定义的loader作为加载器。因此，我们可以直接在TreePanel上面指定loader属性，这样就不需要给每一个节点指定具体的TreeLoader了。因此，上面的代码可以改成如下所示的内容：

《ExtJS2.0实用简明教程》之自定义TreeLoader

在ExtJS自己的TreeLoader中，当要实现从远程服务器端异步加载树节点信息的时候，都是通过请求服务器上的某一个URL来进行的，这个URL返回下面的信息：

[{         id: 1,         text: 'A leaf Node',         leaf: true     },{         id: 2,         text: 'A folder Node',         children: [{             id: 3,             text: 'A child Node',             leaf: true         }]    }]

假如我们是直接通过类似DWR或EasyJWeb的远程脚本引擎在客户端直接调用服务器的业务方法，直接跳过了WEB（不需要Struts、JSP或其它Web层的代码）这一层，这时我们没有URL，这时该怎么办呢？这就需要使用到自定义的TreeLoader，下面我们通过一个实例来做简单的讲解。
看服务器端的ITopicCategoryService
public interface ITopicCategoryService {
List loadCategory(Long id);
}
loadCategory方法返回一个类型为Node的列表，也就是返回指定id的下级分类信节点信息，Node对应树节点的信息，代码如下：

public class Node { private TopicCategory category; Node(TopicCategory category) {  this.category = category; } public String getId() {  return category.getId().toString(); } public boolean getLeaf() {  return category.getChildren().size() < 1; } public String getText() {  return category.getName(); } public String getQtip() {  return category.getName(); } }

Node在这里相当于一个简单适配器，其实就是把数据库中的日志分类实体适配成包树节点对象。

把ITopicCategoryService发布成可供客户端远程调用，使用EasyJWeb的话引如下面三个js：

<script type="text/javascript" src="/ejf/easyajax/prototype.js"></script><script type="text/javascript" src="/ejf/easyajax/engine.js"></script><script type="text/javascript" src="/ejf/easyajax/topicCategoryService.js"></script>

使用DWR的话引入下面的两个js：

<script type="text/javascript" src="/dwr/dwr/engine.js "></script><script type="text/javascript" src="/dwr/dwr/util.js "></script><script type="text/javascript" src="/dwr/dwr/interface/ topicCategoryService.js "></script>

这样我们可以在页使用下面的javascrpt来从服务器端获得某一个节点的子节点信息，代码如下：

function test(){topicCategoryService.loadCategory(1,function(ret){alert("一共有"+ret.length+"个子节点");}}

如何让ExtJS的树面板能通过这个远程web脚本方法topicCategoryService.loadCategory来加载异步加载树节点信息呢？其实很简单，跟一般的使用没什么两样，树面板TreePanel的代码如下：

var tree = new Ext.tree.TreePanel({        autoScroll:true,        animate:true,        width:'100px',        height:'300px',        enableDD:true,        containerScroll: true,         loader: loader  root: new Ext.tree.AsyncTreeNode({        text: '日志分类',               id:'root'     });    });

然后区别是在loader部分，使用远程Web调用来加载树节点的loader，代码如下：

var loader=new WebInvokeTreeLoader({ fn:topicCategoryService.loadCategory}); loader.on("beforeload",function(l,node){   l.args[0]=(node.id!='root'?node.id:"-1");   });

再回顾一下传统的直接通过url加载树节点的TreeLoader代码，如下所示：

var loader=new Ext.tree.TreeLoader({            url:'/topicCategory.ejf?cmd=getCategory&pageSize=-1&treeData=true'                    });loader.on("beforeloader",function(loader,node){   loader.baseParams.id=(node.id!='root'?node.id:"");   });

区别在于，远程脚本调用方式加载树节点信息使用的是WebInvokeTreeLoader，需要通过fn属性来指定用于加载数据的远程方法，并在beforeload事件处理器设置参数远程方法调用的参数值。而传统的树节点加载器是Ext.tree.TreeLoader，需要指定一个url来获得json数据。

WebInvokeTreeLoader是自定义的树加载器，代码其实比较简单，你可以自己写一个。本方案仅供参考，关于WebInvokeTreeLoader的源代码我已经传到了我用ExtJS开发的Blog示例网站上了，仅供VIP会员浏览，有兴趣的朋友可跟我联系。

Ext JS 4倒计时：图形和图表

基本图形功能

一直以来，在Web应用程序中进行绘图是很困难的事情。虽然我们很希望在应用程序中创建丰富的交互式图表或其他图像，但是HTML真的是不是这块料。通常，我们需要使用到Adobe Flash，但这给我们带来了两个难题：我们习惯书写Javascript代码，而且Flash并不是所有设备都支持。解决这个问题的方法就是使用一个纯Javascript的图形库，通过它创建丰富的图形和图表。它可以运行在ie6到iOS等任何平台，而且它已经成为Sencha Touch的附件。

在Ext JS 4中，一个崭新的强大的Ext.draw类，不单使不同绘图引擎的绘图标准化，而且提供了简单统一的绘图API。Ext.draw将使用SVG或VML作为绘图方式，并自动根据不同浏览器使用最佳的绘图方式。一切都是基于矢量的，这意味着你可以将图形放大到任何级别，图形看起来依然清晰。（我们还计划在Ext 4.x版本中加入Canvas支持。）

让我们来看一些演示。第一个我想演示的是使用Ext.draw创建的可调整大小的Sencha Touch Logo 。尝试放大Logo的，可以看到，尽管logo放大了，使用Ext.draw组件创建的logo仍然清晰。使用Ext.draw绘出logo很简单，它使用SVG接口，Ext.Draw知道如何使用它。任何可以使用SVG接口渲染的图形都可以使用Ext.draw进行渲染，甚至老虎：在这个例子中，你可以在屏幕中拖动老虎，并尝试放大看看细节表现。这适用于任何浏览器。

最后一个例子是演示使用Ext.draw在所有浏览器中旋转文本。我们是否已经迷上了这些简单易用的例子？Ext.draw的确很棒，不过它只是开胃菜，主菜是Ext.chart。

令人难以置信的图表

由Ext.draw提供的新的图表功能是Ext JS 4中最令人兴奋的部分之一。我们的使命很明确，就是创造世界上最后的Javascript图表库。我们认为我们已经做到这一点。今天我们将有16个演示与大家分享。请记住，这是测试版，但我们希望你会喜欢你所看到的。请注意，你在我们的演示网页上看到的的16个演示只是很少的一部分。

我们要介绍的前两个图表你可以想到是线图和柱状图。我们有很多这样的演示，但这次让我们从全新的东西开始演示：面积图。下面是一个由一些随机数据做的简单的演示。尝试单击“Reload”按钮，你将看到图表的变化。单击数据标题可以显示或隐藏每个系列的数据。

Ext.chart已集成到新的数据包，从而使你的数据图表显示非常容易。当然，该图表是完全动态的。在下面的例子，随机数据会每隔2秒就添加到store图表将会滚动，当图线到达右侧的时候横轴将更新。

另一个新的图表是雷达图，它又分成填充图和非填充图两种。再次提醒，它很容易和你的数据关联，而且是动态的。

我们也有很多传统的图表：线图、条形图、柱形图、饼图、散列图，或者由它们混合而成的图。

这些图表功能完成集成在Ext JS 4里，不过这不是唯一可以看到它们的地方。你也可以在Sencha Touch的附件里找到它们。我要告诉你们的是，你也可以在还没将你的应用程序升级到Ext JS 4.x的时候使用这些图表。因为Ext Js 4使用全新的沙盒，所以你可以在同一页面中同时运行Ext JS 4和之前版本Ext Js，这意味着你不用升级你的Ext Js 3应用程序，就可以立竿见影的在应用程序中使用新的图表功能（当你获得了4.0的许可证）。

主题和定制

Ext JS 4最关键的一个要求就是能够极其简单的定制主题。这同样适用于绘图和图表，因为它们是简单的HTML基础元素。因此，我们尽我们所能着手创建可定制的图表库。几乎每个图表的每一个方面都可以通过一组CSS样式对微小的细节进行调整。改变颜色、字体和阴影是很容易的，而且图表渲染后仍然可以做修改。所有图表的外观和表现都可以很方便的被定义成图表主题，应用在你的应用程序中。我们将在另一篇博文中探讨这个问题。

不单外观可以被定制，图像图表的行为也是可以被定制的。由于所有于绘制的图像都是一个Ext JS对象，因而很容易在图像中添加鼠标单击或停留等互动行为。如果你需要创建不包含在框架中的图像，你可以创建一个基于Ext.draw包的图像类，定制你需要图像。

试用演示

所有19个图像图像演示你可以在线测试，也可以在这里下载。

今天，我们介绍了新的Ext JS图像图表包。我们迫不及待的将这些演示送到你们的手上并让你们看看它们是如何实现的。如果你想了解更多关于Ext JS 4关于图像图表的功能，我建议你们参加Sencha大会。

原文：http://www.sencha.com/blog/ext-js-4-preview-drawing-and-charting/