ほらやっぱりわすれてた。

久しぶりの開発で自演浦島太郎になってたので
「あー、そんなときのこのブログ」
ってよみかえしてたら

ExtJsのブログの最初のほうにやってたこと。
すっかり忘れてた。

なんだよポータル画面なんてやってたんだ俺。
ソース掘り起こして（どこにやってしまったか。。。）
SVNから引っ張ってこないと。。

そんなねたもあり、ぶれそうなのでひとまず
開発の方向性を再確認。

・事象を残せるIFを持ったグリッド＋ダイアログを作って
・計画と予定と実績を切り分けて
・実績からメールを配信

と、フリーの全文検索でからの各種情報へのIF
と、ポータル画面の作成

これはすべてExtでつくること。
ってかんじだな。

と、それをAndoroidからもつかえるようにJavaの勉強も。

ExtJs－３７ しょぼすぎるはまり

あー、半月以上ほったらかしてしまった。

業務の都合上、
Ext 勉強会に出席できず気がついたら不参加の連絡もしていなかったことに
後日気がつき
申し訳ない限りです。

GWに入ってようやく時間がとれたので久しぶりにさわり、
チョコチョコと修正とかほったらかしていた部分を修正し始めたんですが
一点、コンボボックスがうまく表示されない部分があり、
小２～３時間、右往左往しておりました。

結果、
マスターテーブル上でのフィールドがnchar(10)ってなってて
データは7桁のID。3桁分スペースでパディングされてて
トランザクションテーブル上のフィールドはnvarcharで(8)
ってなっててこれまた10桁の情報を8桁に切り詰めて格納されてて
それじゃ、一致しないわな。


てきとーにふわふわと半月周期で作ってるとたまに陥る。このワナ。
しかしよく飽きずにつづくなぁ。と。

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勉強時間が２～３時間/月になってしまう。

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

ExtJs－３３ ComboBoxのデータ

転職活動でばたばたで参加してなかった
ものすごく久々にExtJS勉強会に参加しました。
-----
WorkShopにもそろそろ復活しようかと。
-----
さて、今日はビール片手にえらく久々にExtJSをさわってまして、
今日はComboboxを。DBから持ってきた値で実装。と、例のごとくです。
ユーザ情報のマスタとプロジェクト情報のマスタと二つほど
Comboboxコントロールを作ってました。
先日買った本をよんで、ふむふむ。と。
で、
-----

Commboboxのコンフィグで

displayField
valueField

なんてあるから

あ、表示はdisplayField
で選択されたデータの紐付けは
valueField
で、これでサブミットされる値はOK。ですな。

なんて、早とちり。。
実際、サブミットされるのはtype=textになってて選択
表示されているテキストになってた。
で、あれれ？選択されたIDをサブミットしたいんだけど？
となるわけですが、

http://extjs.com/forum/showthread.php?p=296133

こちらでちゃんと解説していただいてました。。。
hiddenNameにサブミットする名前を設定しないといけないみたいです？

valueField
はサブミットする際の値となるフィールドを指定する。
が正解なようで。

//----------------------------------------
// record
//----------------------------------------
System.Common.Form.ProjectComboBoxRecord = [
{name: 'id', mapping: 'ID' },
{name: 'name', mapping: 'プロジェクト名' },
{name: 'summary', mapping: 'プロジェクト名' }
];
//----------------------------------------
// store
//----------------------------------------
System.Common.Form.ProjectComboBoxStore = new ExtWrapper.Store(
{
proxy: new ExtWrapper.Proxy({
url:'/PersonalGardenSolution/SystemClasses/readControlsData.aspx'
}),
reader: new ExtWrapper.Reader({
root: 'rows',
totalProperty: 'rowsCount',
id: 'ID'
},
System.Common.Form.ProjectComboBoxRecord
)
});
//----------------------------------------
// combo実装
//----------------------------------------
System.Common.Form.ProjectComboBox = Ext.extend( System.Common.Form.ComboBox,
{
tpl: '

{name}

',
typeAhead: true,
store : System.Common.Form.ProjectComboBoxStore,
initComponent : function()
{
this.valueField = 'id';
this.displayField = 'name';
System.Common.Form.ProjectComboBox.superclass.initComponent.call( this );
this.store.load({
params:{category:'SystemCommonFormProjectComboBox'}
});
}
});
Ext.reg('SystemCommonFormProjectComboBox', System.Common.Form.ProjectComboBox );

で、使用するほうでは、
{ xtype : 'SystemCommonFormProjectComboBox', fieldLabel:"XXXX", hiddenName: "XXXX", width:265 }

みたいな。
おお、できたぞ。

まいくろそふとなまうす

会社を辞めるときに
会社の先輩からグレイとなマウスをもらった。

本当にうれしかった。
ので記載。

先日買ったFILCOのキーボードの青色LEDとあう。
画像はまた今度。

とったので掲載。