ExtJs 命名空间

1：支持命名空间

< script type = " text/javascript " >
// 定义一个命名空间
Ext.namespace( " Ext.wentao " );
// 在命名空间上定义一个类
Ext.wentao.helloworld = Ext.emptyFn;

// 创建一个类的实例
new Ext.wentao.helloworld();
</ script >

其中

Ext.wentao.helloworld = Ext.emptyFn;

等价于

Ext.wentao.helloworld = function() {} ;

2：支持类实例属性

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间
Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

// 为自定义的类 增加一个 name 属性，并赋值
Ext.apply(Ext.wentao.Person.prototype, {
name:"刘文涛"
} )

var _person = new Ext.wentao.Person(); // 实例化 自定义类
alert(_person.name);
_person.name = " 张三 " ; // 修改类name属性
alert(_person.name);
</ script >

3：支持类实例方法

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间
Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

// 演示类实例方法
Ext.apply(Ext.wentao.Person.prototype, {
name:"刘文涛",
sex:"男",
print:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}
} )

var _person = new Ext.wentao.Person(); // 实例化 自定义类
_person.print();
</ script >

4：支持类静态方法

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间
Ext.wentao.Person = Ext.emptyFn; // 在命名空间上自定义一个类

// 演示类实例方法
Ext.apply(Ext.wentao.Person.prototype, {
name:"刘文涛",
sex:"男",
print:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}
} )

// 演示 类静态方法
Ext.wentao.Person.print = function(_name,_sex) {
var _person = new Ext.wentao.Person();
_person.name = _name;
_person.sex = _sex;
_person.print(); //此处调用类 实例方法，上面print是类 静态方法
}

Ext.wentao.Person.print( " 张三 " , " 女 " ); // 调用类 静态方法
</ script >

5：支持构造方法

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间

// 构造方法
Ext.wentao.Person = function(_cfg) {
Ext.apply(this,_cfg);
}

// 演示类实例方法
Ext.apply(Ext.wentao.Person.prototype, {
print:function(){
alert(String.format("姓名:{0},性别:{1}",this.name,this.sex));
}
} )

// 演示 类静态方法
Ext.wentao.Person.print = function(_name,_sex) {
var _person = new Ext.wentao.Person({name:_name,sex:_sex});
_person.print(); //此处调用类 实例方法，上面print是类 静态方法
}

Ext.wentao.Person.print( " 张三 " , " 女 " ); // 调用类 静态方法
</ script >

6：支持类继承

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间

// *******************父类*********************
// 构造方法
Ext.wentao.Person = function(_cfg) {
Ext.apply(this,_cfg);
}

// 演示类实例方法
Ext.apply(Ext.wentao.Person.prototype, {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
}
} )

// *******************子类1*********************

Ext.wentao.Student = function(_cfg) {
Ext.apply(this,_cfg);
}

Ext.extend(Ext.wentao.Student,Ext.wentao.Person, {
job:"学生"
} )

var _student = new Ext.wentao.Student( {name:"张三",sex:"女"} );
_student.print(); // 调用 父类方法
</ script >

7：支持类实例方法重写

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间

// *******************父类*********************
// 构造方法
Ext.wentao.Person = function(_cfg) {
Ext.apply(this,_cfg);
}

// 演示类实例方法
Ext.apply(Ext.wentao.Person.prototype, {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
}
} )

// *******************子类1*********************

Ext.wentao.Student = function(_cfg) {
Ext.apply(this,_cfg);
}

// 重写父类的 实例 方法
Ext.extend(Ext.wentao.Student,Ext.wentao.Person, {
job:"学生",
print:function(){
alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
}
} )

var _student = new Ext.wentao.Student( {name:"张三",sex:"女"} );
_student.print(); // 调用 父类方法
</ script >

8：支持命名空间别名

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间

Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
// 构造方法
Wt.Person = function(_cfg) {
Ext.apply(this,_cfg);
}

// 演示类实例方法
Ext.apply(Wt.Person.prototype, {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
}
} )

// *******************子类1*********************

Wt.Student = function(_cfg) {
Ext.apply(this,_cfg);
}

// 重写父类的 实例 方法
Ext.extend(Wt.Student,Ext.wentao.Person, {
job:"学生",
print:function(){
alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
}
} )

var _student = new Wt.Student( {name:"张q三",sex:"女"} );
_student.print(); // 调用 父类方法
</ script >

9：支持类别名

< script type = " text/javascript " >
Ext.namespace( " Ext.wentao " ); // 自定义一个命名空间

Wt = Ext.wentao; // 命名空间的别名

// *******************父类*********************
// 构造方法
Wt.Person = function(_cfg) {
Ext.apply(this,_cfg);
}

PN = Wt.Person; // 类别名

// 演示类实例方法
Ext.apply(PN.prototype, {
job:"无",
print:function(){
alert(String.format("姓名:{0},性别:{1},角色:{2}",this.name,this.sex,this.job));
}
} )

// *******************子类1*********************

Wt.Student = function(_cfg) {
Ext.apply(this,_cfg);
}

ST = Wt.Student;

// 重写父类的 实例 方法
Ext.extend(ST,PN, {
job:"学生",
print:function(){
alert(String.format("{0}是一位{1}{2}",this.name,this.sex,this.job));
}
} )

var _student = new ST( {name:"张q三",sex:"女"} );
_student.print(); // 调用 父类方法
</ script >

 

在extjs中，namespace的作用域是多大，一个文件吗？我在jsp页面引入两个extjs写的js文件，这两个js文件是有关系的。B.js中声明了一个在规定命名空间下的对象，在A.js中创建这个对象的一个实例，结果却报空或者不是对象。而我把A.js中代码拷贝至B.js的中，完全没有问题了。 前提：我把这两个文件都引用到了.jsp文件中了问题：在extjs中，不能跨文件访问对象吗？命名空间也不支持跨文件吗？

要在a.js调用b。js的内容，要在a。js中导入b。js文件才可以用。同时把他们加载到一个页面没用，他们只是可以同时被这个页面用，并不是他们互相可调用
a中写
require('b.js', {
    basedir : '../js',
    nocache : true,
    reload : true
   });

EXTJS跨命名空间引用

调用端Ext的加载配置

Ext代码

1. Ext.Loader.setConfig({
2. enabled: true,
3. paths : {
4. 'CommonView.common.plugin' : '../common/plugin'
5. }

Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

在公用的命名域内，可以做action,event,logic等的处理，如下图：



在plugin中的controller文件夹中的CommonController中，可以定义如下的页面引用：

Ext代码

1. refs : [
2. { ref : 'displayItem',selector: '#displayItem'}
3. ]

refs : [
        { ref : 'displayItem',selector: '#displayItem'}
    ]

displayItem，引用了不同命名空间中的view中的组件的ID,客户端调用代码如下：

Ext代码

1. {
2. xtype:'container',
3. id:'displayItem',
4. layout:'fit'
5. }

{
    xtype:'container',
    id:'displayItem',
    layout:'fit'
}

客户端,调用公用组件中的Controller,代码如下：

Ext代码

1. {
2. var companentController = this.getController('CommonView.common.plugin.controller.CommonController')
3. companentController .init();
4. companentController.displayItem();
5. }

{
   var companentController = this.getController('CommonView.common.plugin.controller.CommonController')
  companentController .init(); 
  companentController.displayItem();
}

需要特别说明的是：

this.getController('CommonView.common.plugin.controller.CommonController')，
如果组件的Controller中的这个方法，被调用多次，这里就返回多个CommonController，
就可能造成，组件事件的一次触发，就会被CommonController响应多次，因为有多个CommonController实例。我认为方法getController()应该是一个工厂方法。

我们只需要在调用端的Controller的init方法，初始化公用组件的Controller，使得公用组件Controller，成为调用端Controller的一个类成员变量，在调用端的Controller代码如下：

Ext代码

1. commonController:null,
2. init:function(application) {
3. this.commonController = this.getController('CommonView.common.plugin.controller.CommonController');
4. this.commonController.init();
5. }

commonController:null,
   init:function(application) {
        this.commonController  =   this.getController('CommonView.common.plugin.controller.CommonController');
        this.commonController.init();
   }

我们可以在组件CommonController中的方法displayItem中创建
common plugin中的common view,并add到客户端的ID为displayItem的容器中，代码如下：

Ext代码

1. function displayItem() {
2. var displayItem = this.getDisplayItem()
3. var commonView = Ext.create('CommonView.common.plugin.view.CommonView');
4. displayItem.removeAll();
5. displayItem.add(commonView);
6. }

function displayItem() {
       var displayItem = this.getDisplayItem()
       var commonView = Ext.create('CommonView.common.plugin.view.CommonView');
       displayItem.removeAll();
       displayItem.add(commonView);
    }

这样，我们就可以把通用组件commonView以及这个组件的处理逻辑，增加到调用端指定的ID为displayItem的Container中。
需要特别注意的是，客户端调用common plugin的controller、view时的路径：

CommonView.common.plugin.controller.CommonController
CommonView.common.plugin.view.CommonView
总之，如果想在多处复用这个公用的组件CommonView，和这个组件的逻辑，只需要在调用端,按照指定路径，跨命名域引入组件。

Ext代码

1. Ext.Loader.setConfig({
2. enabled: true,
3. paths : {
4. 'CommonView.common.plugin' : '../common/plugin'
5. }

Ext.Loader.setConfig({
        enabled: true,
        paths : {
            'CommonView.common.plugin' : '../common/plugin'
        }
});

并在调用端的View中的需要这个组件的地方写，如下代码：

Ext代码

1. {
2. xtype:'container',
3. id:'displayItem',
4. layout:'fit'
5. }