ExtJs－３６ dirtyについて

先日のバリデータの応用で
ふぉーむでdirtyかどうかを判断して、閉じるときに
「あ、変更しちゃってるけど、保存して閉じるけどいいの？」
って聞きたい。
ので
Close時に

panel.getForm()で取得して
isDirtyをしよう。
↓
×
うまくいかない。変更しても、変更しなくても引っかかる。。
調査：
一個ずつダンプしみる。
どれもこれも引っかかる。

オリジナルと比較すんだよな。たしか。
ロードしたじょうほうはデフォルトじゃないな。確かに。だからだ。
ってことでExtjsallをのぞくと。。。
ありました。

initValue。
domか、getvalueら持ってきてオリジナルに入れる。
これはフォームではなくフィールドのめそっどなので
ロードごにぶん回して呼んでみる
↓
だめだった。

とこの間はここまでだった。
今日はそのつづきで。

さて、、
うーんとinitvalueがprivateメソッドだってことがわかり（ExtJs3.0でコメントに）、
さてじゃぁどうするかと。
そういえばデフォルトってvalueにいれてて、
afterrender後の
initEventで
getvalueしてoriginalValueに格納されてる。
というかロード後のいべんとでoriginalValueにgetValueの値をセットしてやりゃいいわけだ。
で試してみる。

つーかこれはinitvalueこのじっそうだよな。。。

じつは
この実装は、ロード直後にやってたことに気がつく。
これじゃうまくいくはずがない。
だからAction.loadのSuccess時のCallBackでやりゃいいのかな？
↓
あーうまくいったよー


callback_load_success: function( form, action )
{
form.items.each(function(field){
// ロードした情報をオリジナルとする。
//alert(field.originalValue);
field.originalValue = field.getValue();
//alert(field.originalValue);
});
},

onCloseClick : function()
{
//dirtyな情報をチェックTODO:summaryと冗長性あり。
// alert( this.getForm() );
// if( this.getForm().isDirty() ){
// System.Common.MsgBox.showConfirmYN('保存確認', '情報が変更されています。保存しますか？', this.closeConfirmFunction, this);
// }
////これだとなにが変更されたかわからん
var isDirty = false;
var dirtySummary = ''
this.getForm().items.each(function(field){
// なかで情報取得してチェックしているので
if(field.isDirty()){
//
dirtySummary = dirtySummary + field.name + '
';
isDirty = true;
}
});
if( isDirty )
{
System.Common.MsgBox.showConfirmYN('保存確認', dirtySummary + '情報が変更されています。保存しますか？', this.closeConfirmFunction, this);
}
},

これで、閉じるときに保存確認ができるようになった。

ExtJs－３５ validateについて

今日は少し時間が取れました。

ASP.NETのvalidatesummary?みたいに集約してエラー出したいなって場面が出てきました。
画面構成上、タブパネルで入力させるかたちになってるんですが、
ほかのタブに必須項目とかあると集約したエラー情報がないと
背面のタブで発生しているエラー情報が見えないわけで。
フォーム中のバリデータに引っかかったものってアンダーラインで表示されたり。
でわかるんですが、
一部の方々は「なんじゃこの赤いアンダーラインは？」
で思考がとまるケースもあるんじゃないかな。。。
そのためのqtipに出してもそうなるばあいもあるんでしょうね。多分。


で、summaryに吐き出すみたいなことってできないのでしょうか？
ってことでデータを覗いてみるテスト。
ExtJs内部でもform.items.をぶんまわしてvalidateでみて引っかかればfalse
で返しているぶぶんがあったので。。。。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
this.items.each(function(f){
if(!f.validate()){
valid = false;
}
});
//フィールドf.validateって
getRawValueで持ってきてチェックしている。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
ってことはそれを捕まえられればいいわけだ。
①イベントを調べよう。
②フォームの中を見てみよう。
となるわけです。

①APIリファレンス見ると、、actionfailedってやつがありました！！
ですのでFormPanelのInitComponentで
this.on('actionfailed', this.onActionFailed, this );
こんな具合に登録を。

②に中をのぞくってことでイベントリスナーの実装で。
まだテストじっそうなので煩雑だけど一応こんなかんじなんだろうな。
onActionFailed: function( form, action )
{
var invalidateSummary = '';
//フォームのアイテムを回してだめなやつのinvalideTextを参照する。
form.items.each(function(field){
// なかで情報取得してチェックしているので
if(!field.validate()){
//
invalidateSummary = invalidateSummary + field.name + ':' + field.invalidText + '
';
}
});
　　}

あとは一番最初に引っかかったコントロールにフォーカスをあわせてやる。
ってことでどうだろう。これをプラグインにしてサマリコントロールとして汎用にしてとか。
これはまた後日。

ちょっとすっきりした。

ExtJs－３４ イベントについて

Ext勉強会で教わったことを
やってみようと思って取り込んでみた。

今の構成って
・GridPanel
・Dlg（Window）→Panel→FieldSet
で作ってて、

勉強会でやってたアプリケーションのフレームはまだまだ先伸ばし
にしてる。計画ではGridと詳細のダイアログのCRUDプチフレームワーク作って
その跡にアプリケーションの側を。と。

だから勉強会でやってたAppクラスの代わりに
イベントマネージャクラスみたいなのを作ってそこで管理するようにして
ひとまず固定値で特化したつくりにして突っ込んでみた。
と、動機と現状と構成を。

忘れそうなのでとりあえず概要を残しておこうと。。。

①まずはイベントマネージャクラスを作っておいて。
System.Common.EventManager = Ext.extend( Ext.util.Observable, {
constructor : function() {
// イベント定義
this.addEvents('TodoRegisterDlg_executeClose' );
this.addEvents('TodoRegisterFormPanel_Reset' );
this.addEvents('TodoRegisterFormPanel_Submit' );
this.addEvents('TodoRegisterFormPanel_Load' );
this.addEvents('TodoRegisterFormPanel_CopyNew' );
}
});

②ダイアログクラスに引き渡す。
//TODO:暫定配置
App.TaskManegement.TodoBasicGird.eventManager = new System.Common.EventManager();
//----------------------------------------
// create detail dlg
//----------------------------------------
var todoListgrid_createDetailDlg = function( id )
{
// Dlg設定
if( App.TaskManegement.TodoBasicGird.detailDlg === undefined )
{
App.TaskManegement.TodoBasicGird.detailDlg = new App.TaskManegement.TodoRegisterDlg({ eventManager : App.TaskManegement.TodoBasicGird.eventManager});
}
// load設定
if( id != undefined && id != '' )
{
//App.TaskManegement.TodoBasicGird.detailDlg.load( id );
//イベント発火
App.TaskManegement.TodoBasicGird.eventManager.fireEvent('TodoRegisterFormPanel_Load', id );
}
else
{
//コントロールの初期化
App.TaskManegement.TodoBasicGird.detailDlg.reset();
}
App.TaskManegement.TodoBasicGird.detailDlg.show();
};

③ダイアログクラスから内部で使用するパネルクラスへ引き渡す。
App.TaskManegement.TodoRegisterDlg = Ext.extend( Ext.Window, {
initComponent : function()
{
//イベントリスナ登録
this.eventManager.on('TodoRegisterDlg_executeClose', executeClose, this );
Ext.apply( this,
{
closeAction : 'hide',
tools : todo_tools,
title : 'タスク情報編集',
width : 980,
height : 400,
bodyStyle : "padding:0px",
items : [ new App.TaskManegement.TodoRegisterFormPanel({eventManager : this.eventManager})],
eventManager : this.eventManager
});
App.TaskManegement.TodoRegisterDlg.superclass.initComponent.call( this );
},
executeClose : function()
{
App.TaskManagement.TodoRegisterDlg.superclass.close.call();
}


});

てな具合で。
流動的な部分の切り出しなんてまだまだ先だな。
というか、ここのところ時間が取れていないなぁ。
このままだとExt勉強時間が２～３時間/月になってしまう。

趣味のプログラミングなんてこんなものか。。