ExtJS4.2学习(3)——基础知识之简单特性

从本次开始就Ext的基础知识，进行讨论。

这样更有助于我们对后续高级组件进一步展开学习和讨论。

一、简述Ext中几种创建对象的方式

就如我们第一篇中所提到的，ExtJS是一种面向对象的编程方式，说道面向对象就不得不说一下其如何创建对象和如何声明类。

（1）通过create方法来创建对象：

Ext.create('Ext.window.Window', {    title: 'Hello',    height: 200,    width: 400,    layout: 'fit',    items: {  // Let's put an empty grid in just to illustrate fit layout        xtype: 'grid',        border: false,        columns: [{header: 'World'}],                 // One header just for show. There's no data,        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store    }}).show();

请注意这段代码，并非空穴来风，说一下如何找到这段代码的，这里就简单说一下如何使用API，如下图：

这里我们简单的说一下，每一句的意思，当然其实API中说的非常详尽了已经。

这里是加了一些注释的create方法：

Ext.onReady(function(){//create方法创建Window对象Ext.create('Ext.window.Window', {    title: 'Hello',//标题    height: 200,//高度    width: 400,//宽度    layout: 'fit',//布局，后期会有专门的介绍，暂时先简单的知道这是一个充满外边布局的布局就可以了，       //如果说是就是浏览器的body，那就充满整个body    items: {  // Let's put an empty grid in just to illustrate fit layout    //items : 就是说我填充的这么一个组件，给这个window中填充的这么一个组件        xtype: 'grid',//填充组件的类型是grid        border: false,//边框 无        columns: [{header: 'World'}],// One header just for show. There's no data,         //这个地方仅仅是为了展示，并没有提供什么数据        store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store          //这个地方也是一个空的数据集合    }}).show();//show这个方法是将这个对象展示出来});

（2）通过new的方式来创建对象：

了解面向对象语言的朋友，对new的方式来创建对象；那么对于Ext这种模仿面向对象的编程方式，自然而言少不了这种方式：

我们可以大胆的猜想一下，并且将刚才的例子程序“改良”一下：

Ext.onReady(function(){var win = new Ext.window.Window({title: 'Hello',//标题    height: 200,//高度    width: 400,//宽度    layout: 'fit'//布局，后期会有专门的介绍，暂时先简单的知道这是一个充满外边布局的布局就可以了，       //如果说是就是浏览器的body，那就充满整个body});win.show();});

果然，这段程序还是可以的。面向对象的方式在这里再次得到验证。

ExtJS中推荐使用create方法，因为使用create，其实就是使用ClassManager管理对象，这样对内存的管理更加方便（copy的，我个人也只能理解到这个程度）。

那么既然说到创建对象了，那么就不得不说一下它本身类的声明方式：

（3）ExtJS中类的声明

我们搜索一下define，

然后我们可以将其copy进程序，然后运行起来：具体解释如下：

//类声明Ext.onReady(function(){//通过define的方式来声明类Ext.define('My.awesome.Class', {//类的属性someProperty : 'something',//类的方法someMethod : function(s) {alert(s + this.someProperty);}});var obj = new My.awesome.Class();obj.someMethod('Say '); // alerts 'Say something'});

其中ExtJS在类的声明中还有一个构造方法：

initComponent: function() {this.callParent(arguments);}

我们可以把它看做是java中的构造方法使用。

另外，如果我们每一个私有属性上都写get/set方法的话，如果属性多的话，也是一个噩梦啊。那么ExtJS也为我们想到这个问题了，我们可以通过config得到自动的得到get/set方法。

我们在define声明类的时候，经常会用到extend来继承ExtJS某个类，来继承一些属性和方法，学过java的可能知道在java中可以通过implements来实现多继承，那么在ExtJS中可以使用mixins来实现。

这里边就混合了两个类，也就是多继承了两个类：

Ext.define('object',{mixins :{object1 : 'object1',object2: 'object2'}});

这里值得一提的一个点是：这里是面向对象的编程方式，我们不能拿以往的眼光看待js编程，那么这个时候就有一点就是，我们可以将一些类的声明，像java一样放在一个单独的js文件中，就好像是java中的类一样，这样的好处就是：非常干净的组织我们的代码，而且当其他业务需要的时候，还可以非常方便的引用这个组件，这样就实现了代码复用。

二、js原生声明类的方式

js语言中类的声明是一个function想必大家都非常清楚，但是有一点需要注意的是：

//类的声明其实就是一个functionfunction user(){//java 语言的publicthis.name = 'abc';this.sex = man;//var 就相对于高级语言当中的privatevar email = "[e-mail]";this.getEmail = function(){return email;};}

以上注释中说的比较清楚，在此不作赘述。

三、ExtJS动态依赖加载功能

可能有些朋友会想，本身ExtJS的主文件就那么大，如果又加上我们写的那么些js文件的话，这个时候可想而知，得加载多少文件，浪费多少网络带宽。其实ExtJS早就为我们想到这个问题，它本身就有动态依赖加载功能。

当然，这个地方配置也比较简单，首先声明命名空间：

//声明命名空间Ext.Loader.setConfig({enabled:true,//是否开启动态依赖加载功能paths:{//命名空间myApp:'code/ux'}});

在引用的时候，是在new对象的时候：

var win = Ext.create("abc",{//abc是自己声明的类title:'abc',price:600,requires:['abc']//这个地方是类的名称});