Ext中继承的用法

在使用Ext的时候，我们有时候可能不用Ext自带的一些类，而是自己去创建一个自己定义的类。Ext很好的提供了这种方便。那就是在写JS文件的时候自己使用Ext.extend();来完成。
完整的解释是如下：Ext.extend(Object subClass,Object supperClass,[Orrider ]);其中subClass是我们所写的子类，supperClass是我们要继承的类。方括号中的是可选的继承的方法或数据。譬如说我们要实现一个新型窗口，称为MyWindow。举例如下：
第一步先定义：

MyWindow = function(){
	this.feedUrl = new Ext.form.ComboBox({
		id:’test’,
		store:new Ext.data.SimpleStore({
	field:[‘url’,’text’],
	data:this.defaultData
});
});

this.form = new Ext.FormPanel({
	items:this.feedUrl,
	……
});

//以下是该子类的构造器
MyWindow.supperclass.constructor.call(this,{
	title:’Add News’,
	id:’news’,
	……
	buttons:[{
	text:’OK’,
	handler:this.onAdd,
	scope:this
},{	text:’CANCEL’,
	handler:this.hide.createDelegate(this,[])
}],
items:this.form
});
this.addEvents({add:true});
}

第二步定义继承的方法及覆盖或新定义的方法和数据：

Ext.extend(MyWindow,Ext.Window,{
	//数据的定义
defaultData:[
	[‘www.baidu.com’,’百度’],
	[‘http://www.google.com’,’谷歌’]
],
……
//方法的定义
onAdd: function() {
        this.el.mask('Validating Feed...', 'x-mask-loading');
        var url = this.feedUrl.getValue();
        Ext.Ajax.request({
            url: 'feed-proxy.php',
            params: {feed: url},
            success: this.validateFeed,
            failure: this.markInvalid,
            scope: this,
            feedUrl: url
        	});
        }
        ……
});

这样一来，我们就完成了一个新的自定义的子类。可以应用到我们的项目里了。
在AJAX应用中，如何实现面向对象的观点是非常重要的。由于AJAX的异步特性（我们也就是看中了它的这个特性）以及在开发JS代码时它带来的结构繁杂都是我们应该注意的，这种结构注定了AJAX的应用是极难维护的，因而我们想如何才能让JS也具有面向对象的观点，从而便于维护和理解。譬如像Ext，很多人在应用的时候是直接把所有的JS代码全部写在一个JS文件里，有的甚至是直接写在页面里。试想当浏览器加载这几百K的代码时是多么的缓慢，如果是并发访问量很大的门户或者社区类网站呢？结果可想而知。更不必说安全性了。因而我认为，实现JS代码的对象化不仅可以使项目结构清晰、美观，而且易维护和移植。所以我们可以利用Ext里的继承来实现这一想法。譬如我们可以把一系列联系极为密切的应用封装在一个JS文件里，直接的体现是这样的，当你点击一个按钮，这个按钮触发了一个动作，这个动作加载要实现的JS文件，然后直接new一个我们需要的部件，譬如form，关闭时再清空form里的数据并隐藏这个form。这样仅在需要时才加载的方式可以大大提高系统效率，防止系统资源的浪费。毕竟，每次都渲染一个部件是很浪费资源的。