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時半だ。やべ。