extjs3.0与extjs4.0差异
日期：2014-05-16 浏览次数：20478 次
extjs3.0与extjs4.0区别
extjs3.0与extjs4.0区别
<!-- 博文内容 -->
基础上的变化：?
兼容性?
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代码??
Ext.ns("Foo.bar");??
??
Foo.bar = Ext.extend(Ext.util.Observable,{??
? ?? ???//your code here??
});??
Ext.reg("foobar",Foo.bar);??
所以现在创建一个组件应该是这样的：?
Js代码??
Ext.define("Foo.bar",{??
? ?? ???extend : "xxxxxx",??
? ?? ???alias : "widget.foobar"??
? ?? ???//your code here??
});??
现在ExtJS不再使用new关键字（当然你想用也没关系），而是推荐使用Ext.create函数来解决这个问题，例如以往我们创建一个组件的代码是?
Js代码??
var win = new Ext.Window({??
? ?? ???//some options??
});??
而现在则是?
Js代码??
var win = Ext.create("Ext.window.Window",{??
? ?? ???//some options??
});??
新的类加载方法--Class Loading?
现在ExtJS可以动态加载JS文件（类）了，新的Ext.Loader类和一些其它的方法可以完成分别加载所需的JS文件，例如Ext.Loader里的setPath、require等方法函数可以做到动态加载。?
如果要使用这个功能，你首先得启用它：?
Js代码??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'My': 'my_own_path'??
? ?? ?}??
});??
path的意思是，当前引用这个JS的HTML文件同级的my_own_path目录被命名为My,所以以后该目录下的所有类名为My.xxxx的类都能被动态加载。?
例如以下文件目录：?
在定义的时候就是：?
Js代码??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'NS': 'app'??
? ?? ?}??
});??
app/person文件夹中的类名为LKPerson的定义代码为：?
Js代码??
Ext.define("NS.person.LKPerson", {??
? ? extend : "Ext.panel.Panel",??
? ?? ???alias : "widget.lkperson",//当然，这个属性不是必须的??
? ? border : false,??
? ?? ???initComponent : function(){??
? ?? ?? ?? ?? ? this.callParent(arguments);//这个arguments你懂，不懂Google??
? ?? ???}??
})??
注意一点的就是，NS.person.LKPerson中的LKPerson就是文件名称（换句话说文件名必须是LKPerson且必须在person目录下）?
好了，下面看看动态加载的两种方式：?
require的用法如下：?
Js代码??
Ext.require("Foo.bar");??
??
Ext.define("AA.bb.CC",{??
? ?? ???//some options??
});??
require的意思是：在这个类（AA.bb.CC）被加载之前必须要加载Foo.bar并且被实例化（虽然好用但是劝各位不要滥用）。?
uses的用法如下：?
Js代码??
Ext.define("AA.bb.CC",{??
? ?? ???uses:["Foo.bar"]??
});??
uses的意思是：在这个类（AA.bb.CC）在运行过程中要用到Foo.bar这个类，用到的时候再加载。?
其它的就不多解释，具体看API（这句话我最后说一遍 ）?
混入类?
将一个类混入到另外一个类中，创建的时候一同创建：?
Js代码??
Ext.define("Dog",{??
? ? sayHello : function(){??
? ?? ???alert("AAAA")??
? ? }??
})??
??
Ext.define("Animal",{??
? ? mixins:{??
? ?? ???dog:"Dog"??
? ? }??
});??
??
??
Ext.onReady(function(){??
? ? var an = Ext.create("Animal");??
? ? an.mixins.dog.sayHello();??
})??
静态方法?
现在所有的类（是所有的ExtJS类，Ext.define定义的）都提供静态方法，可以很方便的定义：?
Js代码??
Ext.define('Computer', {??
? ???statics: {??
? ?? ?? ?factory: function(brand) {??
? ?? ?? ?? ? // 'this' in static methods refer to the class itself??
? ?? ?? ?? ? return new this(brand);??
? ?? ?? ?}??
? ???},??
??
? ???constructor: function() { ... }??
});??
??
var dellComputer = Computer.factory('Dell');??
Config?
这个东西很时髦，看看用法：?
Js代码??
Ext.define("Foo",{??
? ? config: {??
? ?? ???title: 'Default Title'??
? ? },??
? ? constructor: function(cfg) {??
? ?? ???this.initConfig(cfg);??
? ? }??
});??
??
??
Ext.onReady(function(){??
? ? var an = Ext.create("Foo",{??
? ?? ???title:"My Title"??
? ? });??
? ? console.log(an.getTitle());??
});??
运行以下看看会出现什么？是My Title，config会自动生成g
兼容性?
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代码??
Ext.ns("Foo.bar");??
??
Foo.bar = Ext.extend(Ext.util.Observable,{??
? ?? ???//your code here??
});??
Ext.reg("foobar",Foo.bar);??
所以现在创建一个组件应该是这样的：?
Js代码??
Ext.define("Foo.bar",{??
? ?? ???extend : "xxxxxx",??
? ?? ???alias : "widget.foobar"??
? ?? ???//your code here??
});??
现在ExtJS不再使用new关键字（当然你想用也没关系），而是推荐使用Ext.create函数来解决这个问题，例如以往我们创建一个组件的代码是?
Js代码??
var win = new Ext.Window({??
? ?? ???//some options??
});??
而现在则是?
Js代码??
var win = Ext.create("Ext.window.Window",{??
? ?? ???//some options??
});??
新的类加载方法--Class Loading?
现在ExtJS可以动态加载JS文件（类）了，新的Ext.Loader类和一些其它的方法可以完成分别加载所需的JS文件，例如Ext.Loader里的setPath、require等方法函数可以做到动态加载。?
如果要使用这个功能，你首先得启用它：?
Js代码??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'My': 'my_own_path'??
? ?? ?}??
});??
path的意思是，当前引用这个JS的HTML文件同级的my_own_path目录被命名为My,所以以后该目录下的所有类名为My.xxxx的类都能被动态加载。?
例如以下文件目录：?
在定义的时候就是：?
Js代码??
Ext.Loader.setConfig({??
? ?? ?enabled: true,??
? ?? ?paths: {??
? ?? ?? ? 'NS': 'app'??
? ?? ?}??
});??
app/person文件夹中的类名为LKPerson的定义代码为：?
Js代码??
Ext.define("NS.person.LKPerson", {??
? ? extend : "Ext.panel.Panel",??
? ?? ???alias : "widget.lkperson",//当然，这个属性不是必须的??
? ? border : false,??
? ?? ???initComponent : function(){??
? ?? ?? ?? ?? ? this.callParent(arguments);//这个arguments你懂，不懂Google??
? ?? ???}??
})??
注意一点的就是，NS.person.LKPerson中的LKPerson就是文件名称（换句话说文件名必须是LKPerson且必须在person目录下）?
好了，下面看看动态加载的两种方式：?
require的用法如下：?
Js代码??
Ext.require("Foo.bar");??
??
Ext.define("AA.bb.CC",{??
? ?? ???//some options??
});??
require的意思是：在这个类（AA.bb.CC）被加载之前必须要加载Foo.bar并且被实例化（虽然好用但是劝各位不要滥用）。?
uses的用法如下：?
Js代码??
Ext.define("AA.bb.CC",{??
? ?? ???uses:["Foo.bar"]??
});??
uses的意思是：在这个类（AA.bb.CC）在运行过程中要用到Foo.bar这个类，用到的时候再加载。?
其它的就不多解释，具体看API（这句话我最后说一遍 ）?
混入类?
将一个类混入到另外一个类中，创建的时候一同创建：?
Js代码??
Ext.define("Dog",{??
? ? sayHello : function(){??
? ?? ???alert("AAAA")??
? ? }??
})??
??
Ext.define("Animal",{??
? ? mixins:{??
? ?? ???dog:"Dog"??
? ? }??
});??
??
??
Ext.onReady(function(){??
? ? var an = Ext.create("Animal");??
? ? an.mixins.dog.sayHello();??
})??
静态方法?
现在所有的类（是所有的ExtJS类，Ext.define定义的）都提供静态方法，可以很方便的定义：?
Js代码??
Ext.define('Computer', {??
? ???statics: {??
? ?? ?? ?factory: function(brand) {??
? ?? ?? ?? ? // 'this' in static methods refer to the class itself??
? ?? ?? ?? ? return new this(brand);??
? ?? ?? ?}??
? ???},??
??
? ???constructor: function() { ... }??
});??
??
var dellComputer = Computer.factory('Dell');??
Config?
这个东西很时髦，看看用法：?
Js代码??
Ext.define("Foo",{??
? ? config: {??
? ?? ???title: 'Default Title'??
? ? },??
? ? constructor: function(cfg) {??
? ?? ???this.initConfig(cfg);??
? ? }??
});??
??
??
Ext.onReady(function(){??
? ? var an = Ext.create("Foo",{??
? ?? ???title:"My Title"??
? ? });??
? ? console.log(an.getTitle());??
});??
运行以下看看会出现什么？是My Title，config会自动生成g
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
