ExtJs－５２ 階層構造のつぶしこみ

今日は10日だからまた１W。
先日から夏季休暇をもらってたため、またもや進捗無し。というと寂しいので
先日の続きをゴリ押しで形付けた。

①ストアドから階層のパス構造は返ってくるようになった。
②グリッドのつぶしこみはtoggleを使うことにしている。

ということで
ロード後のデータアクセスと行へのクラス操作がわかればとりあえず画面には
変化が現れるかと。

・データアクセスと追加。
sotreのロード後のコールバック関数内でのアクセスが一番簡単なので（というよりも
それ以外は考える頭がない）そこでパス情報を取得。
で、viewを取得してパス情報をそのままCSSとして追加してしまう。

loadedCallBack : function( record, options, success ){
if( record.length === 0 ){
//alert('0件ですstoreを空にして再描画で空ってことを。でとりあえずＯＫかな？');
this.store.removeAll();
this.render();
}
else{
//TODO:再計算ひつようか？
//this.getView().updateAllColumnWidths();
var index = 0;
for( index =0; index < record.length; index++ ){
this.getView().addRowClass( index, ' ' + record[index].data['itempath'] );
}
}
},

あとは
ダブルクリックなりくりっくなりのリスナーで
これまたレコードから取得してきたパス情報を先頭一致かけて。Alternativeな行がまたちがうCSS
があたってるのでめちゃくちゃですがこれもゴリ押しで。作り直しはまた後日。 ひとまず階層別に
消えたり増えたりできたので親子関係はそれとなく見えるようになった。

onRowdblclick : function( grid, rowIndex, e ){
var record = grid.getStore().getAt(rowIndex);
var data = record.data['itempath'] + '-tree' + record.data['ID'];
var selectClassname = 'div[class^="x-grid3-row ' + data + '"]';
var selectClassname_alt = 'div[class^="x-grid3-row x-grid3-row-alt ' + data + '"]';
Ext.select( selectClassname, true ).each(function(element){
element.toggleClass('system-common-display-none');
})
Ext.select( selectClassname_alt, true ).each(function(element){
element.toggleClass('system-common-display-none');
})
},


明日から仕事。

ネヨー。