Extjs类的动态加载出现问题的原因

一直以来，在web技术中，关于ajax技术中的一些资源，包含那些前期ExtJS的各个版本，虽然是允许裁剪的，但是通常在使用之前它必须要加载整个框架。正如你需要去创建一个普通的Ext.Window，那是一定需要去下载整份的ext-all.js源文件，要不然它就不能正常的运行了。这个时候，Ext JS 4的动态加载的出现就解决了这个问题，因为Ext JS 4的动态加载就是围绕这个技术难点而推出的，我也是在学习Extjs类的动态加载时，碰到了一个问题，希望能够找到解决的方法！
问题如下：在webroot/src/Cookbook文件夹中有两个类Vehicle和Plane，如下是分别的代码细节：
Vehicle.js代码如下：

Ext.define('Cookbook.Vehicle', {
config : {
manufacturer : 'UnKown Manufacturer',
model : 'UnKown Model',
topSpeed : 0
},

constructor : function(manufacturer, model, topSpeed) {
this.initConfig();
if (manufacturer)
this.setManufacturer(manufacturer);
if (model)
this.setModel(model);
if (topSpeed)
this.setTopSpeed(topSpeed);
},

travel : function(distance) {
alert("the" + this.getManufacturer() + " "
+ this.getModel() + "travel" + " " + distance
+ "miles at a topSpeed of" + this.getTopSpeed()
+ "  mph");
}

}, function() {
alert("Cookbook.Vehicle class is created");
});

plane.js代码如下：

Ext.define('Cookbook.Plane',{
extend: 'Cookbook.Vehicle',
config:{
maxAltitude:0

},
constructor:function(manufacturer,model,topSpeed,maxAltitude){
this.initConfig();
if(maxAltitude)
this.setMaxAltitude(maxAltitude);

this.callParent([manufacturer,model,topSpeed]);

},
showMaxAltitude: function(){
alert("the plane"+this.getManufacturer()+" "+this.getModel()+" maxAltitude is "+plane.getMaxAltitude()+"miles");
},
takeOff:function(){
alert("the plane"+this.getManufacturer()+" "+this.getModel()+"is takeOff");
},
land:function(){
alert("the plane"+this.getManufacturer()+" "+this.getModel()+"is landing");
},
travel:function(distance){
this.takeOff();
this.callParent(arguments);
this.showMaxAltitude();
this.land();
}
},function(){
alert("Cookbook.Plane class is created");
}
);

在app.js中动态的加载plane这个类

Ext.onReady(function (){
Ext.Loader.setConfig(
{
enabled:true,
paths:{
'Cookbook' :"src/Cookbook"
}
});

Ext.require('Cookbook.Plane',function(){
var plane= Ext.create('Cookbook.Plane','Boeing','747','1200','10000');
plane.travel(10000);
});

}
);

在app.js中plane这个对象的travel()方法执行出现问题，只执行了travel方法中的 this.takeOff();和this.callParent(arguments);这两个方法，而this.showMaxAltitude()；和this.land();这两个方法却并没有执行，它上面显示的错误是：Uncaught ReferenceError: plane is not defined ，不知道为什么会出这种问题，是我哪个步骤出纰漏了吗？百思不得其解。。。。

在刚刚开始的时候，我以为是因为alert(“the plane”+this.getManufacturer()+” ”+this.getModel()+” maxAltitude is ”+plane.getMaxAltitude()+”miles”);中的plane变量没定义，因为上面的错误也说了，对于getMaxAltitude方法也没定义，所以我就先试试，将plane弹出来，看下有没有被创建，因为上面的错误说plane没定义呀，然后再看下下面的代码细节：

Ext.Loader.setConfig(

	{

	enabled:true,

	paths:{

	‘Cookbook’ :”src/Cookbook”

	}

	});

 

这段代码是不是写对了，还真是被我给检查出来了，还真是plane这个方面的问题呀，出现问题的原因居然就是:alert(“the plane”+this.getManufacturer()+” “+this.getModel()+” maxAltitude is “+plane.getMaxAltitude()+”miles”);这里面的plane应该是this.，怎么会犯了如此低级的一个错误呀！！真是不应该啊，怎地就会这样呢？看来还是自己太粗心所造成的呀！

Ext JS 4的动态加载还是可以给我们带来很多便利的，可以帮我们解决很多根本上的问题，所以，要好好学习关于 Ext JS 4的动态加载方面的知识，使它能够很好的为我们工作！

---