移花接木扩展 Ext JS 控件

核心提示： 要从一个现有的类创建出一个新类，首先要通过一个函数声明新类的构造器，移花接木扩展 Ext JS 控件(2)，然后调用新类属性所共享的扩展方法，这些共享的属性通常是方法，比如院系、性别等要求系统能提供预先定义好的选项供条件制定人员选择，而对于比如特长、年龄等内容不明确的或者选项过多无法列举的情况，

要从一个现有的类创建出一个新类，首先要通过一个函数声明新类的构造器，然后调用新类属性所共享的扩展方法。这些共享的属性通常是方法，但是如果要在实例之间共享数据，应该也一同声明。

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. 实例化新的组件对象

　var　myObject　=　new　MyNewClass　(arg1,　arg2,　etc);　

掌握了扩展 Ext 组件的基本方法之后，我们就可以随意构造满足特定需求的组件。然而 Ext 里已有的组件和示例永远是我们取之不尽，用之不竭的创造源泉。本文以三个 Ext 组件为基础，“嫁接”了其他组件的功能，形成三个新的组件，实现了现有 Ext 组件没有的功能。本文的目的，旨在抛砖引玉，希望能给初学 Ext 的同仁们一点启发和参考，开发出更多、功能更强大的组件。

移 Property Grid 之花接 Editor Grid 之木

首先，介绍一下我们的场景和实际需求。某大学要建设一个教职工科研基金的管理系统，该系统可供基金设置人员设置基金申请条件、发放步骤等，申请人员填报申请人信息、申领基金等。这里以构建一个基金申请条件的组件为例。条件制定人员在制定申请条件时，可以随意添加、删除申请条件；对于某些申请条件，比如院系、性别等要求系统能提供预先定义好的选项供条件制定人员选择，而对于比如特长、年龄等内容不明确的或者选项过多无法列举的情况，则直接提供输入框供条件制定人员输入。