扩展Ext组件
扩展(extension)在Ext中就是指衍生的子类。假设我们已经有一个附有一些方法的基类,现在欲加入新方法。我们可以利用框架的继承特性和JavaScript创建新类的语言特性组合新的一个类。
Ext提供了这样的一个实用函数Ext.extend在Ext框架中实现类继承的机制。这赋予了扩展任何JavaScript基类的能力,而无须对类自身进行代码的修改,扩展Ext组件这是个较理想的方法。
要从一个现有的类创建出一个新类,首先要通过一个函数声明新类的构造器,然后调用新类属性所共享的扩展方法。这些共享的属性通常是方法,但是如果要在实例之间共享数据,应该也一同声明。
JavaScript并没有提供一个自动的调用父类构造器的机制,所以必须通过属性superclass在构造器中显式调用父类。第一个参数总是this,以保证构造器工作在调用函数的作用域。
- 清单1.扩展Ext组件的基本方法
-
-
MyNewClass=function(arg1,arg2,etc){
- //显式调用父类的构造函数
- MyNewClass.superclass.constructor.call(this,arg1,arg2,etc);
- };
- Ext.extend(MyNewClass,SomeBaseClass,{
- myNewFn1:function(){
- //etc.
- },
- myNewFn2:function(){
- //etc.
- }
- });
使用时,我们需要实例化对象:
- 清单2.实例化新的组件对象
-
-
varmyObject=newMyNewClass(arg1,arg2,etc);
掌握了扩展Ext组件的基本方法之后,我们就可以随意构造满足特定需求的组件。然而Ext里已有的组件和示例永远是我们取之不尽,用之不竭的创造源泉。本文以三个Ext组件为基础,“嫁接”了其他组件的功能,形成三个新的组件,实现了现有Ext组件没有的功能。本文的目的,旨在抛砖引玉,希望能给初学Ext的同仁们一点启发和参考,开发出更多、功能更强大的组件。
http://developer.51cto.com/art/201005/202387.htm
分享到:
相关推荐
### Ext组件概述与初学者指南 #### 一、Ext组件概览 Ext是一个功能丰富的JavaScript框架,用于构建桌面级Web应用程序。它提供了大量的组件和工具,使得开发者能够快速且高效地构建用户界面。对于初学者而言,理解...
Ext组件扩展包 - DateTime 是一个专门用于增强JavaScript应用程序中日期和时间处理能力的工具集。在Web开发中,尤其在创建交互式用户界面时,日期和时间选择器是不可或缺的一部分。此扩展包提供了美观且功能丰富的...
综上所述,EXT组件的7WX扩展类是EXT框架与7WX数据格式的桥梁,它通过扩展EXT的DataReader类,实现了对7WX数据的读取和处理,提升了EXT在处理特定数据格式时的灵活性和功能性,进一步拓展了EXT在实际项目中的应用范围...
### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...
- **扩展EXT组件** 开发者可以通过继承EXT提供的组件基类,定制出符合自己需求的组件,增加或修改功能。 - **EXT的布局(Layout)** EXT提供了多种布局方式,如CardLayout、BorderLayout等,用于控制组件在页面...
扩展 EXT 组件 - **创建自定义组件**:通过继承现有的组件来创建新的组件。 - **文件组织**:合理地组织文件结构有助于管理大型项目。 #### 7. EXT 的布局(Layout) - **布局类型**:Ext 提供了多种布局方式,...
- **完成**: 总结了扩展EXT组件的过程。 #### 8. EXT的布局(Layout) - **简单的例子**: 展示了如何使用EXT的布局管理器来组织UI元素。 - **加入内容**: 介绍了如何向布局中添加内容。 #### 9. 开始使用Grid - **...
#### 扩展EXT组件 ExtJS允许开发者扩展现有的组件,以满足特定的需求。这通常是通过覆盖现有组件的方法或属性来实现的。例如,可以通过继承一个现有组件,并在其基础上添加新的功能: ```javascript Ext.define('...
此外,扩展EXT组件也是开发中常见的需求,这可能涉及修改现有组件的行为或外观,甚至创建全新的组件。文档中详细介绍了从创建新文件到完成组件扩展的全过程,帮助开发者快速上手。 #### 8. EXT的布局(Layout) 布局...
扩展EXT组件 - **自定义组件**:指导如何根据项目需求扩展或自定义EXT提供的现有组件。 - **步骤详解**:详细介绍了从创建新文件到实现功能的完整流程。 #### 13. EXT的布局(Layout) - **布局管理**:EXT提供了...
EXT插件是增强或扩展EXT组件功能的代码模块,它们可以注入到特定的组件中,例如表格(grid)、表单(form)或图表(chart)。通过插件,开发者可以轻松地实现一些自定义行为,如数据验证、拖放操作、列排序等。 ...
《深入理解YUI扩展EXT——构建高效前端UI与Ajax应用》 YUI(Yahoo! User Interface Library)是由雅虎公司开发的一套开源JavaScript库,它为开发者提供了丰富的UI组件和功能,以帮助创建高性能、易用的Web应用程序...
扩展EXT组件 29 文件的创建 30 Let's go 33 完成 35 EXT的布局(Layout) 37 简单的例子 38 加入内容 42 开始使用Grid 51 步骤一 定义数据(Data Definition) 51 步骤二 列模型(Column Model) 52 Grid组件的简易...
- **扩展EXT组件**:了解如何根据项目需求自定义或扩展 EXT 提供的标准组件,以满足特定的功能需求。 #### 九、EXT的布局(Layout) - **布局** 是 EXT 中用于定义容器内子元素排列方式的重要概念。EXT 提供了多种...
19 重写公共变量 21 重写(Overriding)公共函数 21 DomQuery基础 22 DomQuery基础 22 扩展EXT组件 29 文件的创建 30 Let's go 33 完成 35 EXT的布局(Layout) 37 简单的例子 38...
确保它们在EXT.js库之后加载,以便正确解析和扩展EXT组件。 4. **使用示例** 在EXT组件上使用TipLite,需要通过配置对象来启用插件,并设置相关属性。例如: ```javascript Ext.application({ name: 'MyApp', ...