こんにちは、Habrachelovek！ 次に、JavaScriptフレームワークの一部のサークルで人気のあるExtJSの小さなExt.Window拡張機能について説明します。 この拡張機能は、別のウィンドウをブロックし、エラーメッセージを表示するように設計されています。
ExtJSが何であるかを知っていることを望みますが、私よりもはるかに優れているわけではありません。
ExtJSには、ウィンドウであるExt.Windowコンポーネントがあります。 そして、彼にはbody（プロパティ）があります-bodyにはmask（）メソッドがあります。これはExt.Elementであるためです 。 このメソッドは、ウィンドウをベールで覆い、ユーザーに何かを待つ必要があることをほのめかします。 実際に何を待たなければならないかを説明するテキストを表示することもできます。 これを行うには、メソッドにメッセージ文字列を渡します。
そのため、インターフェイスの他の部分に影響を与えることなく、このウィンドウ専用のエラーを報告するようなメソッドが必要でした。 しかし、同時にユーザーの応答が必要でした。 ユーザーは「何かが機能していない」という疑いを持たず、「はい、これは機能しません。それが理由です！」 このメソッドは、簡単に呼び出してすぐに実行でき、同時にウィンドウクラスの一部である必要があります。 なぜなら 同時に多くのウィンドウが存在する可能性がありますが、標準のエラー報告ツール （ Ext.MessageBox ）は、そのモーダル操作のために、私にも近づきませんでした。
mask（）およびreverse unmask （）の腸を突っ込んで、これら2つに基づいた独自のメソッドでウィンドウクラスを拡張することが決定されました。 マスク（ str ）がどのように機能するかを見た後、私はそれが本当に私に合わないことに気付きました。 既製の容器は提供しません。 しかし、この方法の工夫のおかげで、CSSが死ぬことがわかりました。
ためらうことなく、メッセージライン、エラーアイコン、および「OK」ボタンを快適に配置するソケットを投げました。
new Ext.Panel({
renderTo: SomeDom,
width: 200,
height: 80,
border: false ,
cls: 'win-error-mask' ,
bodyCfg: {cls: 'win-error-mask-icon' },
html: ' . ...' ,
buttonAlign: 'center' ,
buttons: [ new Ext.Button({
text: 'Ok' ,
width: 70,
handler: function (){
}
})]
}
);
パネルを実験して、必要なディスプレイを実現し、その後、マスクで見たものに基づいてCSSを記述し始めました。 実際、すべての準備が整ったので、パネル上でそれを引き出して色を変更するだけで済みました。 このような変更されたクローンが4つありました。
.win-error-mask {
z-index : 20001 ;
position : absolute ;
top : 0 ;
left : 0 ;
border : 1px solid ;
background : repeat-x 0 -16px ;
padding : 2px ;
border-color : #e03939 ;
background-color : #fe9295 ;
background-image : url(resources/tb-red.gif) ;
}
.win-error-mask div.x-panel-bwrap {
padding : 5px 10px 0px 10px ;
border : 1px solid ;
border-color : #f86c6c ;
background-color : #fff ;
}
.win-error-mask div {
background-color : #fff ;
color : #222 ;
font : normal 11px tahoma, arial, helvetica, sans-serif ;
}
.win-error-mask-icon {
background : transparent no-repeat center left ;
background-image : url(resources/icon-error.gif) ;
padding-left : 40px ;
padding-bottom : 36px ;
}
これらのCSSを簡単なパネルにねじ込み始めましたが、まだExt.Windowクラス拡張の一部ではありませんでした。 ExtJSは、ロジックブロックを実装する際のアップストリーム開発モデルに特に関連しています。
次に、これは小さな問題でした-これをすべて関数でラップし、ウィンドウクラスに固執することです。 ExtJSサイトには、ExtJSでのクラスとOOPの操作に関するドキュメントがたくさんあります。 そして、ここにいくつかのコメント付きの私の結果があります：
Ext.ux.Window = Ext.extend(Ext.Window, {
errorMaskPanel: null , //
errorMask: function (errorMsg){
this .body.mask(); //
this .errorMaskPanel = new Ext.Panel({ // ...
renderTo: this .body.dom, // mask(str)
width: 200,
height: 80,
border: false ,
cls: 'win-error-mask' ,
bodyCfg: {
cls: 'win-error-mask-icon'
},
html: errorMsg,
buttonAlign: 'center' ,
buttons: [ new Ext.Button({
text: 'Ok' ,
width: 70,
handler: function (){ // Ok
this .body.unmask();
this .errorMaskPanel.destroy();
},
scope: this //
})]
});
this .errorMaskPanel.el.center( this .body.dom); // ...
}
});
*はい、すべてのウィンドウクラスをuxスペースにパックし、標準のExt.Windowを置き換えませんでした
そのため、ExtJSの基本クラスを簡単かつ単純に（おそらくどこか他の場所で、ひねくれて）拡張します。