在使用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。这样仅在需要时才加载的方式可以大大提高系统效率,防止系统资源的浪费。毕竟,每次都渲染一个部件是很浪费资源的。
分享到:
相关推荐
在ExtJS中,`Ext.extend()` 是一个核心的函数,用于实现类之间的继承机制。它允许你创建新的类(子类),这些类将继承另一个类(父类)的属性和方法。这个功能对于构建复杂的JavaScript应用程序至关重要,因为它提供...
1. **Ext.extend()**:这是EXTJS中最基础的类继承方法。通过调用`Ext.extend(baseClass, subClass, overrides)`,可以创建一个新的子类,其中`baseClass`是父类,`subClass`是新创建的子类名称,`overrides`是一个...
Ext中的继承 Ext的类设计 Ajax通讯 JSON处理方法 函数的原型扩展 组件的使用: Tab标签页 Ext 1.x中的布局 Grid组件初学 Grid的数据分页 Ext菜单器件 表单组件初学 表单组件初学(二) Cookie的存储 Ext Grid+...
目的:该示例非常详细注释说明Ext的面向对象的编程方式,使用继承,然后重写父类的方法,以及注册自定义事件说明Ext框架是事件驱动的框架编程。 阅读对象:本中心学习Ext面向对象编程的人员 阅读条件:掌握OO的思路...
EXT dojochina Ext类静态方法是一个关于EXT框架在JavaScript中的使用的主题,主要聚焦于Ext类的静态方法。EXT是一个强大的前端开发框架,由Sencha公司开发,它提供了丰富的组件库,用于构建复杂的Web应用程序。在EXT...
在传统的JavaScript中,我们通常使用原型链(Prototype Chain)来实现对象的继承。然而,`Ext`库提供了一个更优雅、更易于理解和维护的方式来处理继承,这包括`Ext.extend()`方法和`Ext.create()`函数。 ### `Ext....
Ext通过Element的静态方法`select`或`query`可以方便地获取页面中的多个DOM节点,这比原生JavaScript的DOM选择器更加灵活和强大。 - **响应事件** Ext提供了一套事件处理机制,使开发者能够轻松地为DOM元素绑定...
在传统的创建`Ext.Store`的方法中,我们通常会这样定义一个Store: ```javascript var store = new Ext.data.JsonStore({ // store configurations }); store.load(); ``` 然后通过`store`变量来访问和操作Store...
- **DataView**:DataView 组件的使用方法,以及与其他组件的配合使用。 - **其他新组件**:列举了 Ext2 中新增的一些组件。 以上知识点总结涵盖了 Ext2.2 中文手册中的主要内容,从基本概念到具体实践,为初学者...
在这个特定的例子中,我们关注的是"Ext继承和扩展",这是Ext JS中两个核心的概念,它们对于理解和创建自定义组件至关重要。 1. **Ext继承**: 在面向对象编程中,继承是类之间的一种关系,允许一个类(子类或派生...
EXT3.0中文API文档是针对EXT JavaScript库的版本3.0所编写的详细参考资料,主要面向前端开发者,特别是那些在Web应用中使用EXT3.0框架进行开发的专业人士。EXT是一个强大的用户界面库,提供了丰富的组件和功能,用于...
3. **渲染FCKEditor**:在EXT组件的`onRender`方法中,调用FCKEditor的初始化函数,将编辑器实例化到指定的DOM元素上。这通常涉及创建一个隐藏的`textarea`元素,FCKEditor会替换这个元素来提供编辑界面。 4. **...
这通常涉及到继承EXT的基础组件类,然后在`render`方法中初始化FCKeditor实例。代码可能类似于: ```javascript Ext.extend(MyFCKComponent, Ext.Component, { initComponent: function() { this....
初学者通常会从下载、安装框架开始,然后通过学习Ext的基本概念,如Element、Widgets、Ajax等,逐步过渡到布局的使用、Grid组件和Menu组件的创建,再到模板的使用和表单组件的构建,最后深入到继承、组件模型、容器...
首先,定义一个类,继承自EXTJS的`Ext.container.Container`,并在`renderTpl`配置项中添加`<audio>`标签。然后,为`<audio>`元素添加`src`属性,用于指定音频文件路径。例如: ```javascript Ext.define('...
总的来说,`ext继承`(`extend`)是JavaScript中实现继承的一种方式,它通过复制属性和方法以及调整原型链来让一个类能够继承另一个类的特性。这种技术在构建复杂应用时尤其有用,因为它促进了代码的模块化和重用。...
在这个主题"Ext一些方法的重写"中,我们将深入探讨如何在`Ext`库中重写方法,以满足特定的需求或优化性能。 `Ext.extend()` 是`Ext`库中的一个核心函数,它用于创建类的继承链。在JavaScript这种没有类的语言中,`...
在面向对象编程中,类的继承是创建新类的一种方式,新类可以从现有类(父类)继承属性和方法。在Ext 2.2中,各个组件和类通常会形成一个复杂的继承链,使得代码可以重用并保持一致性。类说明图可以帮助开发者理解和...