入院から一年

ふと一年前ってなにしてたんだろーってよみかえしたら

アレ。何日入院してたんだ。

から一年。
まぁいろいろあり。
膀胱炎？痔？前立腺炎？のどれかになりかけたが
たまに出る蕁麻疹以外は正常。って異常なのかな？

本当に健康、普通ってのがいちばんですね。はよねよ。

ExtJs－５０ Ext.Elementにようやくその３（階層DBの変更はやめ）

22日の勉強会は体調不良にて欠席することになりました。
本当にものすごーくたのしみにしていたのでへこみました。
参加枠からもれてしまっていた人、ごめんなさい。


さて、出ましたExtJs本。
早速、Amazonにて購入（とどいてませんが）。おそらく既知の内容になると思うのですが
ExtJs好き（なんだそりゃ）としてはもう早く読みたくて仕方ありません。
早く届かないか待ち遠しいのですがもうすでに資格の本あわせると５冊平行読み。
なんだかわけがわからなくなってきます。。。

で、本題。
先日、階層構造DBを変更してGridにTree構造を持たせようと画策してました。。
お題「Ext.Elementにようやく」のくくりはTreeを攻略しがてらGridへ移植
するってのものかねようとおもってたんですが
ふと先日のWorkshopFinalで
Ext３．０のhttpproxyのconfig「api」で各種URL指定ができるってきいていたので
あ、Extのバージョンあげな。とサンプルとデモを眺めてたんです。。。。。



TreeGridがある！！。
これでできるじゃないですか。



それも今までのDB構造からTreeLoader向けのJson吐き出す機構はすでに
くみあがっているのでそのまま使えるし。

ということで階層DBの再設計作戦は白紙に戻して
上位IDをかかえる形での構造で行くことに決定。

でもElementシリーズは続けてグリッドにガントチャートの線をFromTo指定で
ひく勉強を。。


『絶対「間に合う」仕事術』よんでる最中、はやく実装したい感が湧き上がりました。
モチベーション維持も。。



あ、あと会社でお世話になってるクールな同僚にDataTierGeneratorを紹介してて
つまづいたので追記した。。。ExtJs－３１ DataTierGenerator（DBの照合順序）

ExtJs－４９ Ext.Elementにようやくその２（階層DB）

昨日は疲れがでたのか早々に寝てしまい。

今日は先ほどまで寝てしまい。

明日は会社のためもう寝ます。

が、

階層構造をCSSで動的に付与するために
テーブル構造を
ID,上位ID,リーフかどうかの判定用フラグ
なんてやってたのですが、
どうもいけてない感たっぷりなのでぐぐったらすぐに。
包含図で考察する方法がありました。
ものすごく丁寧に解説していただいたのでSQL初心者な私でも理解できました。
これを汎用的に実装しておいて
WBS以外の部署関係等も含め包含の管理を実装しよう。

まずはストアドの作成とDataTierの実装を。
するっていうことを決めて今日は寝る。

ExtJs－４８ Ext.Elementにようやく

今日から三連休夜のひと時が取れる。
少しだけ今までてが出せてなかった部分に。
・Elementの操作（基礎だろ、という突っ込みは無しで）か、
・Xtemplateを。どちらにしようかと。
で、Elementに成りました。

なぜかというとタスクの階層構造を作りたく。。。
最初はGroupingGridViewをどうにか入れ子にして
階層をつくりゃ手抜きでいけるか。と考えるも。

そのグループの進捗とか管理できないではないか。
やはりGridViewだわ。
ということでTreeViewとGroupingGridのcollapsedの仕組みの理解と
階層による＋－記号とインデントの付与を自力で実装しなければならないのかな？？

・CSSの切り替えなんですね。
　x-grid-group x-grid-group-collapsed
.x-grid-group-collapsed .x-grid-group-body{display:none;}
　ってなってる。
　で、表示はzoom:1って。

　これに倣って実装すりゃいいのかな。

GridVeiwのヘッダの＋、-記号の切り替えは
＋、－の記号は
9X100の領域に上の方に＋、下のほうに－ってなってて、
それをわけてるんですね。
.x-grid-group-collapsedのときは＋を表示するから
{background-position:3px 3px;}
－は下の方を使うから
{background:transparent url(../images/default/grid/group-expand-sprite.gif) no-repeat scroll 3px -47px;}

でいいのかな。

クラス指定でその配下の要素をつぶしたりしているのであれば
Grid生成時の子要素生成時なり生成後なりに付与してあげなければならない。
これもなるべく手抜きで。

指針は
・既存のGroupingの機構をそのままGridへ移植。

これで行こう。
で、
①現状調査
　Gridの各行のCSS状況を。
　行は、 alternate含めるとこの二行に集約されるわけで。

②CSSの書き換え
　GroupViewのCSSを当ててみるテスト
③階層の実装
　イベントの実装
④多段レベルへの展開。
ってこんなことせずに、普通に消すときゃdisplay:none;出すときゃzoom:1にかえればいいんだ。って気が付く。

階層を判別するようのクラスを付与してあげてね。
それもちまちまやらず、
これも先日、小堤さんから教わったCompositeElementで一気に解決。っていくのかな。
良い勉強がてらにちょっくら触ってみよう。

まずは男らしく、偶数行を消してみた。
Ext.select( 'div[class="x-grid3-row"]', true ).each(function(element){
element.setStyle({
display: 'none'
});
});
うわぁおもろ。きえた。
で、altの方も。
Ext.select( 'div[class="x-grid3-row x-grid3-row-alt"]', true ).each(function(element){
element.setStyle({
display: 'none'
});
});
おお。これで全部消えた。

今度は表示だからremoveすりゃいいのかな。とAPIリファレンス見る。。
って、ちょっとまて、
toggleClass ってメソッドあるじゃん。

これでやればいいんだな。くらす指定だから、
display:nome;をクラスで定義しておいて。。

.system-common-display-none
{
display:none;
}

で

Ext.select( 'div[class="x-grid3-row x-grid3-row-alt"]', true ).each(function(element){
element.toggleClass('system-common-display-none');
});

を実施。

うまくいった！と思いきや、トグルしない。なぜだ？
あ、Addしてるんだからselectのクラス指定が変わらんといかん。

Ext.select( 'div[class="x-grid3-row x-grid3-row-alt system-common-display-none"]', true ).each(function(element){
element.toggleClass('system-common-display-none');
});

愚直だとこう。

あ、うまくいった。
でも芸がない。「^=」で接頭一致で実施。

Ext.select( 'div[class^="x-grid3-row"]', true ).each(function(element){
element.toggleClass('system-common-display-none');
});

ほら来た。
できた。

あとはDBから持ってきた階層構造による動的なクラス名付与と
トグルの実装をやってあげればOK.
インデントとアイコンも変えなきゃね。

すげーすっきり。
明日はもっと理解を深めよう。
ってもう午前1時半だ。やべ。

ExtJs－４７ 本が届いた

待ちにまったExt本の第二段が届いた。
あれれ？発売日は20日に成ってたんだけど。

二部構成で。
LearningExtJSの続きってわけじゃないんだけど、一部はutil系の説明を。
59ページにあるExtJsのオブジェクトモデルマップはぱっと見、
わかりやすくて面白い。
あとは例のごとくサンプルバリバリのってて読みやすく、
英語がしょぼい私でも容易？に読める？理解した気になれる？ので楽しい。
ってまだ流し見だけど。

二部はプロジェクトの紹介をどばーっと。
Chapter4にあるTimeKeeperExeってやつはまさしく今つくってる
Todo管理用ツールの要素満載。
というよりもベースがもろこれに成ってしまう。

ハードコピーがたくさんあるのでばらばら見て、
「あ、こんな実装したかったんだ」的なきっかけから
本文をみる半サンプルリファレンス的な位置づけで。

LerningExtJSになかったXTemplateについてものってるし。
これは小堤さんが解説してくれてたままなので英語でも
やんわり理解できるレベル。
でも日本語本があればうれしいなぁと。
ってそういえばでるっつってたかなぁ。。。

しかし本買いすぎ。借りすぎ。
読む時間が。。。

ExtJs－４６ EditorGridPanelで怪我の功名

先日、EditorGridPanel云々。ってセルごとにやってたけど、
通信のオーバーヘッドが気になるし、
今ひとつなれない。
やはり使い手側が保存の契機をつかんでおきたい。
ので保存ボタンをつけて。

それはうまくいくのだが、
今回のお題が意味するのは

「編集が反映されない」のである。
あれれ？何でだろ。configの設定かな？とリファレンス、サンプル見るも
問題なし。

やはり行き着くのはExtソース。
EditorGridPanelで見てみました。
line33721あたりでコンプリート処理してるんです。
で、
値が変わってて、
バリデータにもかからず、
きゃんせるでもなかったら

レコードのフィールドへセット！

ってあれー？

つまり、フィールドが取れてないんじゃないのか？と。
console.dir()とかいれてフィールド情報見てみたら案の定、
undefined.さん。

で、このフィールド値、さかのぼると
getDataIndexメソッドにカラム番号入れて、、内部ではconfigに設定された
dataIndexとってきてる。

あれ？ちゃんとせっていしてたんだけどな。。。
と、
見直すと
「I」が小文字になってるし。
ああ、そうですか。そうですか。

ということでcolumnModelの定義を全面見直し。
みんな小文字でやんの。

おかげでずーっとほったらかしておいた

「ソートができない」件も無事解決。

これでGridPanel、EditorGridPanelをサーバサイド
含めてある程度使えるようになったわけで。。。

configでたまに陥るワナ。
ビールのみながらだと特に危ない。
エラー起きないし。

でも良かった。