ExtJS 4.0 的改变--较为完整的介绍

最新推荐文章于 2013-04-27 18:06:00 发布
转载 最新推荐文章于 2013-04-27 18:06:00 发布 · 1k 阅读 · 0
文章标签：

#extjs #function #constructor #浏览器 #actionscript #flex

转自：http://blog.youkuaiyun.com/tctc_2/article/details/7526892

 

惯例，看之前先看看我的很久很久以前的学习笔记（就是那个Word文档，没兴趣的可以不看，不影响）：
http://wenku.baidu.com/view/ce8d3e08763231126edb1146.html

本文里面不会详细介绍某些方法函数具体如何使用，例子全部自己写的（部分参考API和ExtJS 4.0 Developer Preview），应该不会有错，提到的方法函数只提供名字，自己去API看（在此严重鄙视一些照搬API就出本书捞钱的人）

基础上的变化：

兼容性
ExtJS4最终会提供一个兼容ExtJS 3的解决方案。

沙箱模式
可是使用alias来为组件添加别名，类似以前的Ext.reg，不过alias会用不同的类别区分开来，例如，widget.xxxxx和feature.xxxxx是不一样的，虽然它们都是用alias来定义的，但是类别完全不同。

包和命名空间的改变
现在的ExtJS不再使用混乱的分包机制（其实以前的感觉更加直白），例如以前的Window，包名是Ext.Window，但是现在则是Ext.window.Window，Ext.window包下还包括了Ext.window.MessageBox等。SplitButton则是Ext.button.Split。

创建新的对象
现在ExtJS使用Ext.define函数来创建组件类，该函数还能实现自动加载JS类（uses属性，需设置Ext.Loader为开启详见下文，看不懂看API），它会自动的完成以前的ns（namespace）功能。例如下面

Js代码 复制代码 收藏代码
  1. Ext.ns("Foo.bar");  
  2.  
  3. Foo.bar = Ext.extend(Ext.util.Observable,{  
  4.         //your code here  
  5. });  
  6. Ext.reg("foobar",Foo.bar); 
[js] view plain copy
  1. Ext.ns("Foo.bar"); 
  2.  
  3. Foo.bar = Ext.extend(Ext.util.Observable,{ 
  4.         //your code here 
  5. }); 
  6. Ext.reg("foobar",Foo.bar); 


所以现在创建一个组件应该是这样的：

Js代码 复制代码 收藏代码
  1. Ext.define("Foo.bar",{  
  2.         extend : "xxxxxx",  
  3.         alias : "widget.foobar" 
  4.         //your code here  
  5. }); 
[js] view plain copy
  1. Ext.define("Foo.bar",{ 
  2.         extend : "xxxxxx", 
  3.         alias : "widget.foobar" 
  4.         //your code here 
  5. }); 



现在ExtJS不再使用new关键字（当然你想用也没关系），而是推荐使用Ext.create函数来解决这个问题，例如以往我们创建一个组件的代码是

Js代码 复制代码 收藏代码
  1. var win = new Ext.Window({  
  2.         //some options  
  3. }); 
[js] view plain copy
  1. var win = new Ext.Window({ 
  2.         //some options 
  3. }); 


而现在则是

Js代码 复制代码 收藏代码
  1. var win = Ext.create("Ext.window.Window",{  
  2.         //some options  
  3. }); 
[js] view plain copy
  1. var win = Ext.create("Ext.window.Window",{ 
  2.         //some options 
  3. }); 



新的类加载方法--Class Loading
现在ExtJS可以动态加载JS文件（类）了，新的Ext.Loader类和一些其它的方法可以完成分别加载所需的JS文件，例如Ext.Loader里的setPath、require等方法函数可以做到动态加载。
如果要使用这个功能，你首先得启用它：

Js代码 复制代码 收藏代码
  1. Ext.Loader.setConfig({  
  2.       enabled: true,  
  3.       paths: {  
  4.           'My': 'my_own_path' 
  5.       }  
  6. }); 
[js] view plain copy
  1. Ext.Loader.setConfig({ 
  2.       enabled: true, 
  3.       paths: { 
  4.           'My': 'my_own_path' 
  5.       } 
  6. }); 


path的意思是，当前引用这个JS的HTML文件同级的my_own_path目录被命名为My,所以以后该目录下的所有类名为My.xxxx的类都能被动态加载。
例如以下文件目录：

在定义的时候就是：

Js代码 复制代码 收藏代码
  1. Ext.Loader.setConfig({  
  2.       enabled: true,  
  3.       paths: {  
  4.           'NS': 'app' 
  5.       }  
  6. }); 
[js] view plain copy
  1. Ext.Loader.setConfig({ 
  2.       enabled: true, 
  3.       paths: { 
  4.           'NS': 'app' 
  5.       } 
  6. }); 


app/person文件夹中的类名为LKPerson的定义代码为：

Js代码 复制代码 收藏代码
  1. Ext.define("NS.person.LKPerson", {  
  2.     extend : "Ext.panel.Panel",  
  3.         alias : "widget.lkperson",//当然，这个属性不是必须的 
  4.     border : false,  
  5.         initComponent : function(){  
  6.                 this.callParent(arguments);//这个arguments你懂，不懂Google 
  7.         }  
  8. }) 
[js] view plain copy
  1. Ext.define("NS.person.LKPerson", { 
  2.     extend : "Ext.panel.Panel", 
  3.         alias : "widget.lkperson",//当然，这个属性不是必须的 
  4.     border : false, 
  5.         initComponent : function(){ 
  6.                 this.callParent(arguments);//这个arguments你懂，不懂Google 
  7.         } 
  8. }) 


注意一点的就是，NS.person.LKPerson中的LKPerson就是文件名称（换句话说文件名必须是LKPerson且必须在person目录下）

好了，下面看看动态加载的两种方式：
require的用法如下：

Js代码 复制代码 收藏代码
  1. Ext.require("Foo.bar");  
  2.  
  3. Ext.define("AA.bb.CC",{  
  4.         //some options  
  5. }); 
[js] view plain copy
  1. Ext.require("Foo.bar"); 
  2.  
  3. Ext.define("AA.bb.CC",{ 
  4.         //some options 
  5. }); 



require的意思是：在这个类（AA.bb.CC）被加载之前必须要加载Foo.bar并且被实例化（虽然好用但是劝各位不要滥用）。

uses的用法如下：

Js代码 复制代码 收藏代码
  1. Ext.define("AA.bb.CC",{  
  2.         uses:["Foo.bar"]  
  3. }); 
[js] view plain copy
  1. Ext.define("AA.bb.CC",{ 
  2.         uses:["Foo.bar"] 
  3. }); 



uses的意思是：在这个类（AA.bb.CC）在运行过程中要用到Foo.bar这个类，用到的时候再加载。

其它的就不多解释，具体看API（这句话我最后说一遍 ）

混入类
将一个类混入到另外一个类中，创建的时候一同创建：

Js代码 复制代码 收藏代码
  1. Ext.define("Dog",{  
  2.     sayHello : function(){  
  3.         alert("AAAA")  
  4.     }  
  5. })  
  6.  
  7. Ext.define("Animal",{  
  8.     mixins:{  
  9.         dog:"Dog" 
  10.     }  
  11. });  
  12.  
  13.  
  14. Ext.onReady(function(){  
  15.     var an = Ext.create("Animal");  
  16.     an.mixins.dog.sayHello();  
  17. }) 
[js] view plain copy
  1. Ext.define("Dog",{ 
  2.     sayHello : function(){ 
  3.         alert("AAAA") 
  4.     } 
  5. }) 
  6.  
  7. Ext.define("Animal",{ 
  8.     mixins:{ 
  9.         dog:"Dog" 
  10.     } 
  11. }); 
  12.  
  13.  
  14. Ext.onReady(function(){ 
  15.     var an = Ext.create("Animal"); 
  16.     an.mixins.dog.sayHello(); 
  17. }) 



静态方法
现在所有的类（是所有的ExtJS类，Ext.define定义的）都提供静态方法，可以很方便的定义：

Js代码 复制代码 收藏代码
  1. Ext.define('Computer', {  
  2.      statics: {  
  3.          factory: function(brand) {  
  4.              // 'this' in static methods refer to the class itself 
  5.              return new this(brand);  
  6.          }  
  7.      },  
  8.  
  9.      constructor: function() { ... }  
  10. });  
  11.  
  12. var dellComputer = Computer.factory('Dell'); 
[js] view plain copy
  1. Ext.define('Computer', { 
  2.      statics: { 
  3.          factory: function(brand) { 
  4.              // 'this' in static methods refer to the class itself 
  5.              return new this(brand); 
  6.          } 
  7.      }, 
  8.  
  9.      constructor: function() { ... } 
  10. }); 
  11.  
  12. var dellComputer = Computer.factory('Dell'); 



Config
这个东西很时髦，看看用法：

Js代码 复制代码 收藏代码
  1. Ext.define("Foo",{  
  2.     config: {  
  3.         title: 'Default Title' 
  4.     },  
  5.     constructor: function(cfg) {  
  6.         this.initConfig(cfg);  
  7.     }  
  8. });  
  9.  
  10.  
  11. Ext.onReady(function(){  
  12.     var an = Ext.create("Foo",{  
  13.         title:"My Title" 
  14.     });  
  15.     console.log(an.getTitle());  
  16. }); 
[js] view plain copy
  1. Ext.define("Foo",{ 
  2.     config: { 
  3.         title: 'Default Title' 
  4.     }, 
  5.     constructor: function(cfg) { 
  6.         this.initConfig(cfg); 
  7.     } 
  8. }); 
  9.  
  10.  
  11. Ext.onReady(function(){ 
  12.     var an = Ext.create("Foo",{ 
  13.         title:"My Title" 
  14.     }); 
  15.     console.log(an.getTitle()); 
  16. }); 


运行以下看看会出现什么？是My Title，config会自动生成getter和setter还有apply方法。

Ext.env.Browser
这个东西很好很强大。。。。记得以前有Ext.isIE、Ext.isFF等方法判断浏览器，这次ExtJS 4不仅保留了以前的函数，还提供了更为强大Ext.env包来干这些事情，这个包下面还有其它两个类：
Ext.env.OS，顾名思义判断操作系统的，印象中ExtJS3中好像也有，不过这次新增了一些操作系统（主要是移动领域的操作系统）。

Js代码 复制代码 收藏代码
  1. if (Ext.os.is.Windows) {  
  2.      // Windows specific code here  
  3. }  
  4.  
  5. if (Ext.os.is.iOS) {  
  6.      // iPad, iPod, iPhone, etc.  
  7. } 
[js] view plain copy
  1. if (Ext.os.is.Windows) { 
  2.      // Windows specific code here 
  3. } 
  4.  
  5. if (Ext.os.is.iOS) { 
  6.      // iPad, iPod, iPhone, etc. 
  7. } 



Ext.env.FeatureDetector,这个绝对是新加的，主要用于判断HTML5和CSS3的，例如

  • CSS3/动画/转换
  • Canvas/ SVG/ VML
  • 触摸屏是否可用/方向
  • 地理位置（HTML5的东西相信不陌生吧？）
  • SqlDatabase
  • WebSockets
  • History
  • 音频
  • 视频


Lang包的修改
不知道lang是什么意思？（想想java.lang.String和java.lang.Number吧）
现在ExtJS 4一直在为新的ECMAScript标准做准备，这就是为什么要有这个包存在的原因，新的ECMAScript标准大家可以在ActionScript3中详细看看，AS3基本上是遵循了下一代ECMAScript标准的，例如数据类型String、Number、Array、uint等等，ExtJS 4为了能与下一代的ECMAScript标准兼容，提前提供了这些东西的JS实现。

Ext.Function
这个东西不知道大家平时用不用（也许大家用了没察觉到），我是经常用的。例如在以往的ExtJS版本中的代码：

Js代码 复制代码 收藏代码
  1. function foo(){  
  2.        //这里  
  3. }.createDelegate(scope,arguments); 
[js] view plain copy
  1. function foo(){ 
  2.        //这里 
  3. }.createDelegate(scope,arguments); 


现在变成了（这里使用了一个综合的例子，大家可以重点看看bind的用法）：

Js代码 复制代码 收藏代码
  1. Ext.define("Foo",{  
  2.     config:{  
  3.         bar:"I don't need sex,the government fucks me every day!" 
  4.     },  
  5.     constructor : function(cfg){  
  6.         this.initConfig(cfg);  
  7.     }  
  8. });  
  9.  
  10. function fun(str){  
  11.     if(str){  
  12.         alert(str);  
  13.         return;  
  14.     }  
  15.     alert(this.getBar());  
  16. }  
  17.  
  18. Ext.onReady(function(){  
  19.     var foo = Ext.create("Foo");  
  20.     Ext.bind(fun,foo)();//后面的括号你懂  
  21.     //如果要传递参数可以以数组的形式放入，例如这样：  
  22.     //Ext.bind(fun,foo,["私はセックスを必要としない、政府は毎日私をファック！"])(); 
  23. }); 
[js] view plain copy
  1. Ext.define("Foo",{ 
  2.     config:{ 
  3.         bar:"I don't need sex,the government fucks me every day!" 
  4.     }, 
  5.     constructor : function(cfg){ 
  6.         this.initConfig(cfg); 
  7.     } 
  8. }); 
  9.  
  10. function fun(str){ 
  11.     if(str){ 
  12.         alert(str); 
  13.         return; 
  14.     } 
  15.     alert(this.getBar()); 
  16. } 
  17.  
  18. Ext.onReady(function(){ 
  19.     var foo = Ext.create("Foo"); 
  20.     Ext.bind(fun,foo)();//后面的括号你懂 
  21.     //如果要传递参数可以以数组的形式放入，例如这样： 
  22.     //Ext.bind(fun,foo,["私はセックスを必要としない、政府は毎日私をファック！"])(); 
  23. }); 


好了，我承认我有点那啥，不过希望不影响你继续读下去的兴趣。

相同的还有
ExtJS 3中的

Js代码 复制代码 收藏代码
  1. myFunction.defer(1000, scope); 
[js] view plain copy
  1. myFunction.defer(1000, scope); 



变成了4中的

Js代码 复制代码 收藏代码
  1. Ext.defer(myFunction, 1000, scope); 
[js] view plain copy
  1. Ext.defer(myFunction, 1000, scope); 


还有callBack变成了pass，其它的自己去发掘。

ExtJS的工具，
就是它：

使用工具来编译你的JS，别想歪了，我知道JS是解释性的，详细的先看看这篇文章关于JSBuilder的作用：
http://hi.baidu.com/mallor/blog/item/5aec22f3e3dcbadc0b46e074.html

ExtJS的senchaSDKtools里面还提供了theme的制作（命令行的？？！！！），如果嫌ExtJS审美疲劳了可以试试这个。没玩过，所以不多解释，这里就告诉大家有这么回事儿就行了。

关于大家最关心的数据
这个Store想必是最关心的吧？（好了，外面貌似下冰雹了我晕，楼顶啪啪的！没时间去核实有北京的2011年七月二十六号晚上21：40：00左右的网友如果核实了留言证实一下）。
嗯，说到冰雹，我觉得转载这篇文章的人应该注意一下告诉出处，这篇文章来自流水无心的ITEYE博客http://andy-ghg.iteye.com/

扯远了，再回来继续说，这个Store现在改变可不小，详细的参看一下这个文章
[url src='http://www.sencha.com/blog/ext-js-4-anatomy-of-a-model/']Countdown to Ext JS 4: Anatomy of a Model[/url]
好了，我知道我很懒，但是我可以简单说一下：modal代替了以往store中fields:[""]的功能，但是我没用（实际使用有问题－ －！学艺不精），其实它是一个对象。。。对的是对象，MVC中的Model，好了，具体看API中关于MVC的介绍吧。
Store中有一个变化就是baseParams变程了extraParams，注意下。每一个Store必须（？是否必须我也不知道，不过我现在是这么用的）要有一个Proxy且必须给一个type，现在的Store是这样写的：

Js代码 复制代码 收藏代码
  1. Ext.define('User', {  
  2.     extend: 'Ext.data.Model',  
  3.     fields: [  
  4.         {name: 'name',  type: 'string'},  
  5.         {name: 'age',   type: 'int'}  
  6.     ]  
  7. });  
  8.  
  9. Ext.create("Ext.data.Store",{  
  10.     modal:"User",  
  11.     proxy{  
  12.         url : "xxxx.do",  
  13.         type : "ajax" 
  14.     }  
  15. }) 
[js] view plain copy
  1. Ext.define('User', { 
  2.     extend: 'Ext.data.Model', 
  3.     fields: [ 
  4.         {name: 'name',  type: 'string'}, 
  5.         {name: 'age',   type: 'int'} 
  6.     ] 
  7. }); 
  8.  
  9. Ext.create("Ext.data.Store",{ 
  10.     modal:"User", 
  11.     proxy{ 
  12.         url : "xxxx.do", 
  13.         type : "ajax" 
  14.     } 
  15. }) 


确实像那么回事儿，但是我不买账。。。在实际项目中我还是用我的fileds，在没彻底搞明白之前，不太敢这么弄 。

当然Store的改动远远不止这些，例如Proxy中新增了一个localStorage（Ext.data.proxy.LocalStorage）用于过渡到HTML5的localStorage等等。

Draw绘图
这个东西喜欢吗？我喜欢嘿嘿
ExtJS4中提供了绘图，夸浏览器的，它内部实现了Canvas、SVG、VML等绘图方法，所以不同的浏览器它会自动使用该浏览器支持的绘图方式。支持IE6789、基于Gecko的浏览器(FF)、基于WebKit内核的浏览器(Chrome)。

FX
从ExtJS提供这个以来我就不怎么用，原因很简单，浪费我的资源。。。。在新的ExtJS中，提供了类似Flex中关于动画的包方法Ext.fx.target.*，因为我不怎么用，所以不再阐述。


布局
这里的改变也很大，但是我觉得我在这个博客里说再多也没有你自己去运行它的例子来得要直观。


好了，说了这么多，当然没有说完。。。。更多细节的改变的大家自己去发掘，推荐一篇文章《ExtJS 4.0 Developer Preview》，地址我忘了，网络时代相信对你来说找到它不难。


最后做一下小小的广告：
我自己写的AS3（Flex）流程图例子快要完工了～！以前提供了一个简易的Demo版本，这次是经过重大修改后的（不是说以前有重大的BUG，而是以前的实在太难用－ －！），虽然是例子，但是如果您喜欢，完全可以用来做二次开发～！嘿嘿。下面是最新版的截图：


目前提供了这些小组件：


最后的最后
从ExtJS 2.0一直用到4.0，从Flex 3用到Flex 4.5，感慨很多，在ExtJS成长的过程中我已渐渐的从前端转向了后端，不是因为我不再热爱前端和RIA，而是因为我觉得多方的了解与涉及能让自己得到更好的升华，目前专注j2ee开发，主要涉及Spring、Spring Security、CAS SSO、JMS ActiveMQ、Hibernate、jBPM、Oracle。
其它的包括C#、C++QT4、jQuery等等也装模作样的学了些，所以不要再讨论某个语言某个框架的优劣，有这个时间可以学到很多很多东西。何必眼光这么狭隘呢？，争论太浪费精力。少点争论多点实际付出。

ext4.0 ext4.0
07-15
最新的ext4.0，最新的ext4.0，最新的ext4.0。
ext4.0中文文档
08-21
ext4.0的中文文档，界面很优美
Ext4.0中文版手册
07-04
Ext4.0中文版
Ext 4概述
06-01 1182
Ext 4概述
精选资源
extjs4.0帮助文档 extjs-docs-4.0.2.zip
05-27
extjs4.0开发人员以及学习可以下载参考
Extjs4.0通用后台管理系统源码完整大型项目（ExtJS 4.2+Hibernate 4.1.7+Spring MVC 3.2.8）
10-26
可二次开发Extjs4.0通用后台管理系统源码完整大型项目。数据库在项目里面的一个sql文件里面 1、采用Spring MVC的静态加载缓存功能，在首页将Javascript文件、CSS文件和图片等静态资源文件加载进来放进内存，极大提高...
(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip
12-08
【标题】：“(Java+JSP)可二次开发Extjs4.0通用后台管理系统源码完整大型项目.zip”指的是一个基于Java和JSP技术，并利用Extjs4.0框架开发的可扩展的后台管理系统源码。这个项目是针对中大型企业的需求设计的，提供...
精选资源
extjs-7.0.0-gpl
08-06
在"extjs-7.0.0-gpl"版本中，我们看到的是ExtJS框架的一个重要里程碑，这个版本引入了许多新特性、性能优化和兼容性的提升。 1. **组件化开发**：ExtJS 7.0.0的核心是其组件化的开发模式。组件可以是按钮、表格、...
官方ExtJs-4.0
06-15
最新官方版《ExtJs-4.0.2》 ExtJS 主要用来开发RIA富客户端的AJAX应用，主要用于创建前端用户界面，与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员 JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一 款不可多得的JavaScript客户端技术的精品
经典Ext js4.0
09-14
经典的Ext js4.0源码包，解压压缩包后放入tomactWebapps目录，运行tomact即可看到ext js事例展示，有很多种页面展示效果哦
ext4.0入门教程
01-02
extjs很好的入门教程，专门为初学者量身打造，大神可跳过。
Ext 4.0官方最新版下载
05-03
呵呵，最新版的Ext 4.0，官网下载，留给自己，也留给大家！
Ext4.0MVC演示例子 Ext4.0MVC
11-17
Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo Ext4.0 Ext4.0MVC Demo
Ext4.0学习笔记（4~9章 MVC、高级组件、布局以及图表）
大哲
12-21 732
               第四章 MVC学习    从这个图中我们可以很清楚的看到M 、V、C在ExtJS4.0里面所对应数据类型。  靠右边是对应的代码结构。  下描述一下这model、store、view、controller以及application这几者之间的关系。 （1）application：它是MVC的...
ext4.0学习
04-08 560
概念：    （1）ExtJS是一个面向开发RIA也即富客户端 的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。（以前是基于YAHOO-UI ,现在已经完全独立了）    （2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。扩展性相当...
Ext4.0新特性以及常用数据处理功能
abo38416的博客
04-27 230
1. extjs4.0对原生javaScript功能进行了扩展（API中的Utilities模块中的NativeExtensions） Utilities：常用的一些工具处理类 Native Extensions Ext.Array Ext.Number Ext.Object Ext.String Ext....
Ext4.0之Panel
一切皆有联系
03-23 2286
Ext.onReady(function () { var categoryID = Ext.getDom("hfCategoryID").value; Ext.create('Ext.data.Store', { storeId: 'simpsonsStore', fields: ['ID', 'CategoryID', 'Name', 'Perc
ExtJS4.0-API文件使用教程与详解
接下来，我将详细介绍ExtJS4.0框架的相关知识点。 ### ExtJS4.0核心概念： 1. **MVC架构模式**：ExtJS4.0遵循MVC（Model-View-Controller）设计模式，通过模型（Model）管理数据，视图（View）负责展示数据，控制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值