Ext.Windowのcloseについて

[tomof]

現在、Ext.Windowを使用して、Ext.jsサンプルのWindow->LayoutWindowのような処理を実装しようとしています。
http://extjs.com/deploy/dev/examples/window/layout.html (http://extjs.com/forum/../deploy/dev/examples/window/layout.html)
困っていることはExt.Windowがcloseされると、それに乗っているオブジェクトも含めすべて消えてしまうことです。


上記のサンプルでは、「button.on('click', function(){」の中に全てのオブジェクトを生成する処理を書き込んでいますが、私が作成中のアプリケーションの場合、オブジェクト生成の処理が膨大になってしまい、なんとか外出しに出来ないものかと悩んでいます。


またウインドウが閉じられた場合、ウインドウ上で行われた状態をリセットしたいため、hideも使えません。
悩んだ挙句、ウインドウに含まれるオブジェクトを単純に宣言するのではなく、オブジェクトを生成して返り値を
そっくりそのオブジェクトになるような関数を使って、ウインドウを呼び出すタイミングで必要なオブジェクトすべての生成関数を呼び出していますが、いまいちスマートなやり方で無いように感じています。


この方法以外にもっとスマートな方法があれば教えていただけないでしょうか。
よろしくお願い致します。

※
余談ですがウインドウの二重起動防止に、下記のような処理を組んでいます。



if(!Ext.get("ウインドウのID")){
　　　　//ウインドウ呼び出し処理
}

[yuki]

困っていることはExt.Windowがcloseされると、それに乗っているオブジェクトも含めすべて消えてしまうことです。


これは、コンフィグオプションの「closeAction」を「hide」（デフォルトはclose）にしてあげることで防げますよね。



またウインドウが閉じられた場合、ウインドウ上で行われた状態をリセットしたいため、hideも使えません。

で、リセット処理をするためのメソッドを用意しておいて、beforehideかhideイベントでそのメソッドを呼び出してあげればいいのではないでしょうか？:-?

[tomof]

で、リセット処理をするためのメソッドを用意しておいて、beforehideかhideイベントでそのメソッドを呼び出してあげればいいのではないでしょうか？:-?


なるほど…。そういう発想に辿りつけなくて情けないです。まだまだ、修行不足ですね。:((
あとは、コンテナーやパネルにHTMLフォームのresetのような機能があればと思うんですが…。
調査＆試してみた後に、またご報告します。
ありがとうございました。

[tomof]

hideイベントに初期化処理を実装するというヒントをいただきましたが、自分で再考した結果
元の処理の「オブジェクトを返す関数」をExt.extendを使用して独自のコンポーネント化するのが
良いのではという結論に達しました。


ウインドウを呼び出す際に下記のようにコンポーネントをnewすることで、
新しいオブジェクトを生成するようにしました。
closeメソッドでオブジェクトが消し、ウインドウを呼びされる際に再度オブジェクトを作るというやり方です。


下記ブログエントリーを参考にさせていただきました。
http://d.hatena.ne.jp/w650/20080830/1220067587


ただし、Ext.extendには気をつけなければならないことがあり、
下記ブログエントリーにそのことがまとめられています。
http://code.xenophy.com/?p=582


itemsに一生懸命オブジェクトを指定して、Firebugに「this.items.add is not a function」と怒られ続けておりました…。itemsへの指定を全てxtypeにすれば解決できるのかな…？
進展がありましたら、またこちらに報告します。

[yuki]

hideイベントに初期化処理を実装するというヒントをいただきましたが、自分で再考した結果元の処理の「オブジェクトを返す関数」をExt.extendを使用して独自のコンポーネント化するのが良いのではという結論に達しました。

複雑なコンポーネントを作成する場合には、独自コンポーネント化はほぼ常に必須ですね。大賛成です。ただ、、、


ウインドウを呼び出す際に下記のようにコンポーネントをnewすることで、
新しいオブジェクトを生成するようにしました。closeメソッドでオブジェクトが消し、ウインドウを呼びされる際に再度オブジェクトを作るというやり方です。

一般論になりますが、その複雑なコンポーネントを毎回newするのはちょっと（具体的なコードが無いのであくまでも一般論ですが）。独自コンポーネントを作るのであれば、そのコンポーネントにreset的なメソッドを実装してあげて呼び出してあげた方がパフォーマンス的にはいいのではないのかな、と（destroy→newの方がシンプルで簡単ではありますが:s）


ただし、Ext.extendには気をつけなければならないことがあり、
下記ブログエントリーにそのことがまとめられています。
http://code.xenophy.com/?p=582

Ext.extendというより、Componentのサブクラスを作るときの注意点ですね。慣れてしまえばそうでもないのですが、確かに明文化されていないので、どこかにキレイにまとめた方がいいですね（3.0のリリースに合わせて英語版のTutorialも大幅に更新されるとのことですが、、、）

ちなみに、上のブログ主は、月一の勉強会で話をしてくれている小堤さんです:D


itemsに一生懸命オブジェクトを指定して、Firebugに「this.items.add is not a function」と怒られ続けておりました…。itemsへの指定を全てxtypeにすれば解決できるのかな…？

これは、ちょっとソースをみないと分からないですね。全てxtypeにするとかっていう問題でもないと思いますが。

[tomof]

一般論になりますが、その複雑なコンポーネントを毎回newするのはちょっと（具体的なコードが無いのであくまでも一般論ですが）。独自コンポーネントを作るのであれば、そのコンポーネントにreset的なメソッドを実装してあげて呼び出してあげた方がパフォーマンス的にはいいのではないのかな、と（destroy→newの方がシンプルで簡単ではありますが:s）



考えが二転三転して、すみません。yukiさんのおっしゃるとおりで、いろいろ試している間に毎回newするのは相当非効率で、reset的なメソッドを実装するほうが効率的であることに気付きました。上級者のアドバイスを素直に聞くべきでした。パフォーマンスも段違いですよね。大変失礼しました:((




ちなみに、上のブログ主は、月一の勉強会で話をしてくれている小堤さんです:D



来週にもありますよね。すご～～～く参加したいんですが、地方在住のため指をくわえているような状態です。
機会があれば是非とも出席したいです。

[amanoman]

Extのライブラリーを利用する上で、独自コンポーネントは確かに欠かせないですね。
でも、注意も必要です。
経験上、独自コンポーネントのインスタンスがremove等で崩壊された時に独自に追加したdom、Ext以外のobject,handlerは、独自コンポーネントのdestroyで削除しておかないと開発が進むにつれ、メモリーリークや、原因不明の障害に悩まされることになります。
後々面倒な事になるので、設計時は考慮されたら良いと思います。

[tomof]

amanomanさん

貴重な情報、ありがとうございます:))
こういった貴重な情報をフォーラム内で共有できるのは良いことですよね。
なんか、スレッドのタイトルと全く違った内容になってしまっているので
独自コンポーネント作る人用に「独自コンポーネントの注意点」みたいなスレッドを立てておいた方が良いかな:-?

[tomof]

遅くなりましたが、close処理を最終的にどのようにしたかソース例を記しておきます。
yukiさんのアドバイス通り、コンフィグオプションにてcloseActionにhideを設定し、hideイベントにいろんな処理を仕込んでおきました。



　　//Windowのその他のコンフィグオプション…
,closeAction : 'hide'
,listeners : {
hide: function(){
//Window上のフォーム値をリセット
//formHoge.getForm().reset()では、formパネルに乗っかているグリッド内のチェックボックスがリセットされなかった
formHoge.getForm().getEl().dom.reset();

//ウインドウの位置をブラウザの表示領域の中央へ
this.setPagePosition((document.body.clientWidth - this.getSize().width) / 2, (document.body.clientHeight - this.getSize().height) / 2);

//表示切替が必要な場合は、下記のように切替処理を仕込んでおく
hogeForm.show();
confirmPanel.hide();
Ext.getCmp('button1').show();
Ext.getCmp('button2').hide();
}
}

[yuki]

素晴らしい:D
ただ、この一連の処理を（このコンポーネントの）メソッド化しておいてあげれば、他のイベントやコンポーネントからも呼べますよねB)

[tomof]

素晴らしい:D
ただ、この一連の処理を（このコンポーネントの）メソッド化しておいてあげれば、他のイベントやコンポーネントからも呼べますよねB)

コンポーネント化は実はまだなんです…:s
Ext.jsというかjavaScriptというか、本当奥が深いっすね。