关于Extjs一些重要概念的领悟

因为初次接触Extjs，所以起初学习的时候对一些概念有些认识模糊。经过了一个星期的学习（学习途径：研读API、查看官方案例、阅读官方教程及自买书籍）终于对这些概念有些明白 了。 现在记录下这个过程以鉴后车、以鉴有用人。

1、关于Extjs中的命名空间

通过研读 Ext.Loader.setPath({ 'Ext.ux.desktop': 'js',MyDesktop: '' });这句代码我了解到，Extjs中的命名空间也可以只是对一个路径的引用，而非一定要是类所在文件夹的路径（如java的包路径）。这里的setPath设定了两个命名空间Ext.ux.desktop和MyDesktop，都只是对类路径的一个引用(前者引用的是js文件夹，后者引用的是根目录)，并没有实际的文件夹Ext>>ux>>desktop存在(我以前以为确实存在这三个文件夹呢)。它相当于一个虚拟的类路径，可以通过这个虚拟类路径引用对应文件夹下的类（通过alert(Ext.Loader.getPath('MyDesktop.App'));可以查看类路径设置的是否正确）。

 

2、关于Extjs和Jquery的库体系比较

这两者都是一个基础的实用库，但Extjs是一个类结构体系的，而Jquery是一个函数体系的。前者以类的体系结构来封装，提供相应的属性和方法，使用的时候需要实例化类。后者是一个函数库，使用的时候直接调用函数。前者更适用于大型项目。

 

3、Extjs中创建类的方法

A：老方法

var MyWindow = Ext.extend(Object, { ... });

或

Ext.ns('My.cool');
My.cool.Window = Ext.extend(Ext.Window, { ... });

 

B:4.0中新方法

Ext.define(className, members, onClassCreated);

例子：

Ext.define('My.sample.Person', {
name: 'Unknown',

constructor: function(name) {
if (name) {
this.name = name;
}
},

eat: function(foodType) {
alert(this.name + " is eating: " + foodType);
}
});

var aaron = Ext.create('My.sample.Person', 'Aaron');
aaron.eat("Salad"); // alert("Aaron is eating: Salad");

例子2：

 

Ext.define('My.awesome.Class', {
someProperty: 'something',

someMethod: function() {
alert(s + this.someProperty);
}

...
});

var obj = new My.awesome.Class();

obj.someMethod('Say '); // alerts 'Say something'

4、Extjs中实例化类的方法

A：通过类的完整名称、 别名或备用名称实例化类。

create( [String name], [Object... args] ) : Object

 

例子：

// alias
var window = Ext.create('widget.window', {
width: 600,
height: 800,
...
});

// alternate name
var window = Ext.create('Ext.Window', {
width: 600,
height: 800,
...
});

// full class name
var window = Ext.create('Ext.window.Window', {
width: 600,
height: 800,
...
});

// single object with xclass property:
var window = Ext.create({
xclass: 'Ext.window.Window', // any valid value for 'name' (above)
width: 600,
height: 800,
...
});

 

B：传统的new xx()方式

myDesktopApp = new MyDesktop.App();

MyDesktop是类App所在的命名空间。