直感的なイベント処理のコードって、どうすれば良いですか?

[nasust]

初めまして、初投稿となります。

ExtJS3を経験は一ヶ月ぐらいのものです。

ExtJS3で、コーディングしていて、疑問に思ったんですが、直感的なイベントのシーケンシャルな処理はできないでしょうか?

例えば、次のシーケンシャルな処理があるとします。

1.Windowを表示する。
2.ロードマスクを表示する。
3.Ajax.requestする。
4.Ajax.requestが終了したら、リモートから受け取ったデータを元に、Window内部のitemsを更新して、doLayout
5.doLayoutが完了したら、ロードマスク解除

自分が考えた直感的な疑似コード


window.on( "show" , showLoadMask , window ) //showイベントが発生したら、ロードマスクを表示
.on( "show" , ajaxRequest , connection )//showイベントが発生したら、Ajax.request
.on( "requestcomplete" , windowItemRefresh , window ) //requestcompleteイベントが発生したら、doLayout
.on( "afterlayout" , hideLoadMask , window );//afterlayoutが発生したら、ロードマスク解除

*scopeが指定されていたら、on関数は、scopeを返す。してなければ、thisを返す。
*functionでfalseを返すと、チェインを切る。

メソッドチェインならず、イベントコールバックチェインような感じです。

他に良いアイデアがあれば、よろしくお願いします。

[nasust]

下記のコードのように、Linuxのパイプ処理みたいな感じで実現できそうです。ただ、途中でエラーが発生した場合が問題です。



//var eventPipe= new EventPipe( this.onShowDoAJaxRequest , this )
// .onNext( connection , "requestcomplete" , this.onRequestConpleteDoLayout , this )
// .onNext( extWindow , "afterlayout" , this.onAfterLayout , this );
//
//extWindow.on( "show" , eventPipe.exec , eventPipe );
//extWindow.show();

EventPipe = Ext.extend( Ext.util.Observable , {

constructor: function( handler , scope , defaultCheinOptions ){
this.chainList = [];
this.chainIndex = 0;
this.handler = handler;
this.scope = scope;
this.nextOptions = {
single:true
}
Ext.apply( this.nextOptions , defaultCheinOptions );
},

onNext : function( observable , event , handler , scope , options ){

if( !options ){
options = this.nextOptions;
}
if( !scope ){
scope = window;
}

var invokeObservable = {
observable : observable,
event : event,
handler : handler,
scope : scope,
options : options
};

this.chainList.push( invokeObservable );

return this;
},

exec : function(){
this.chainIndex = 0;
if( this.chainList.length > 0 ){
var invokeObservableNext = this.chainList[ 0 ];
invokeObservableNext.observable.on( invokeObservableNext.event , this.execNext , this , invokeObservableNext.options );
}
this.handler.apply( this.scope , arguments );
},

//private
execNext : function(){
var invokeObservable = this.chainList[ this.chainIndex ];
this.chainIndex++;
if( this.chainIndex < this.chainList.length ){
var invokeObservableNext = this.chainList[ this.chainIndex ];
invokeObservableNext.observable.on( invokeObservableNext.event , this.execNext , this , invokeObservableNext.options );
}
invokeObservable.handler.apply( invokeObservable.scope , arguments );
}

} );

[yuki]

う〜ん、もう慣れてしまったせいか、いまのやり方が十分直感的になってしまっています:)
あと、アニメーションとかサイズの変更のような操作についてはメソッドチェーンは分かりやすいですが、「イベント」ってタイミングも発生場所もバラバラなのでチェーンすると逆に分かりにくくなるような気がするのですが・・・