自定义Ext组件的一些提示和技巧

翻译自《Tips and Tricks for Ext JS Component Developers》August 27, 2010 by Aaron Conran 转载请注明Ext中文网。

ExtJS 默认提供的是常见组件，但要想囊括全部需求，却几乎是不可能的。——故所以便有自定义组件的必要了。令人感到可喜的是，现今的 Sencha 社区就有一个高质量的 Ext组件社区，形成一个富足的生态系统。而在这里，我就有关怎么写组件时的提示和技巧，为大家介绍一番。

当接收到大量的事件，如洪水一般猛烈的时候，ExtJS 允许你将这些事件的执行过程缓冲起来，怎么执行？就是在事件被触发之前，预先设定好的一个时间，等待这个时间过去才执行。这不但对于提升性能来说很有帮助的，同时也能降低网络流量。举例来说，我们有一个呈现主次关系的 Grid，根据记录的值更新详细信息的显示，此时我们通过一个 AJAX 请求来实现。可能出现以下的代码：

var sm = this.getSelectionModel();

sm.on('rowselect', this.onGridRowSelect, this, {buffer: 300});

在用户点击某行加上 300 毫秒过去后，Ext 才会执行onGridRowSelect() 方法。该事件处理手段在 Ext 中是相当典型的。如果你还不太熟悉可用的配置选项，那么你应该查看文档中的

创建 DelayedTask 类时，指定你想执行的函数作为构造函数的第一个参数。一种比较常见的类写法如下：

//public api

something: function() {

if (!this.somethingTask) {

this.somethingTask = new Ext.util.DelayedTask(this.doSomething, this);

}

this.somethingTask.delay(this.somethingTaskDelay);

},

//private

doSomething: function() {

// heavy processing which needs

to be buffered

alert('something executed!');

这将会允许你的用户组件在一行中执行“something”数次，同时“doSomething”只会在“somethingTaskDelay”之后被执行。当与 DOM 交互时（比如 DOM reflows），这样可优化耗时且不必要的操作，十分简单。

编写组件时，你或者经常会有这样的需求，就是在渲染前，只执行一次就足够了，但渲染后却可以执行多次。要达到此目的，可以先检查“rendered”属性的标记来判定是否已经渲染了组件，然后设置一次性执行的事件处理器，以在渲染组件后重新调用该方法。以后就允许组件的用户在组件生命期的任意时刻调用这个方法，而不论是否渲染了组件。

someMethod: function() {

if (!this.rendered) {

this.on('render', this.someMethod, this, {single: true});

return;

// typical processing

另外常见的例子，则是用户希望调用那个方法多次，但是只在渲染过后仅发生一次。这种实现如下：someMethod: function() {

if (!this.rendered && !this.someMethodEventSetup){

this.someMethodEventSetup = true;

} 

自定义组件应该在某些关键时刻提供相关事件支持，比如说组件展开或者收缩的时候。由于你的组件都是 Ext.util.Observable 的子类，你将会通过继承得到“addEvents”和“fireEvent”方法。“addEvents”的作用就是定义组件事件。“fireEvent”的作用就是通知抽象的订阅者一个事件已经发生，次数不限。如果有心研究一下的话，请看看 Ext JS 组件源代码来学习在何处添加事件。

事件应当：

提供在那时到底是什么发生了的信息

应提供有一个“beforeXXX”事件，在原事件之前发生，并可以在“beforeXXX”事件中替 XXX 事件作取消的决定，这样接下来的 XXX 事件就不会发生发生

为了在组件中定义事件，你可以在 initComponent() 初始化组件方法之中“添加”或者定义事件。每一个你触发的事件都应该通过 addEvents() 方法在定义时所规定的参数。

举例来说：

initComponent: function() {

MyCustomComponent.superclass.initComponent.call(this);

this.addEvents('beforeexpand', 'expand');

可以调用 fireEvent 方法触发事件。第一个参数是事件名称，其它的附加参数也会被传给事件处理器。

比如说：

this.fireEvent('expand', this, cmp, e);

假设在 Ext.Container 容器中，我们打算暴露一个展开 Expand 的事件，并随之执行容器自身的一个方法（实际上容器的展开，可以这么说是 DOM 的事件触发了 expand 事件的这么行为）。这个过程很简单，可以用 on()/addEventListener() 方法定义：

myCt.on('expand', function(ct, cmp, e) {

});

透过提供一个“预告事件”来允许用户取消某个行为是很重要的。在 Ext JS 中，如果在任何一个“预告事件”中返回 false，那么真正的目标事件将不会触发执行。因为 Ext JS 中的事件是同步的，要事件处理器不返回 false，实际才会真正去执行，如下例：

if (this.fireEvent('beforeexpand', this, cmp, e) !== false) {

// 执行展开

通过认识这种与 Ext JS 组件相似的模式，尽可能地反复表现出来，其他开发者会感到你写的组件让他们更加熟悉地上手，并可以更切合他们的应用，以便修改……

一份良好质量的源码怎么能少了清晰可读的注释呢？没错，不要偷懒，都给你的公共的方法、公共属性、配置项的等写上注释。哪怕是自己弄的程序，也要最好养成写注释的习惯。无论是自己还是别人，看文本肯定要比看计算机代码舒服，尤其是你在隔几个天后回头看代码的时候。Ext 是采用类似 JSDoc，（但有不一致的些地方，译者注）规范的注释。你可以使用

眼见及下，不少开发者都已经是有经验的开发者，由此由衷希望你们分享你们所得的经验或者技巧，还有意见，这都是对整个社区非常有益的。如果你只是想扩展一下 Ext JS 组件，没有关系，其实这是说明 Ext JS 缺少了那些组件——这也是我们需要聆听社区的重要声音！