余白をクリックしてでTreeNodeのフォー カスをはずす

[djodjo]

TreeNodeの選択状態を、TreePanelの空いたスペースを
クリックすることで解除させたいです。

selectedのノードを再度selectした際にunselectする方法もありますが
ノード以外の白い部分をクリックすることでフォーカスをはずしたいのですがよい方法を知っている方いらっしゃいませんか？:-?

----結構文字化けしますね

[djodjo]

誰もいない？

[yuki]

TreePanelがtplだとして、


var el = tpl.getTreeEl();
el.on('click',function(e,t){
if(this.id == t.id){
tpl.getSelectionModel().clearSelections();
}
},el);

というのはどうでしょうか？

TreePanelそのもののClickイベントでは余白へのクリックを拾えないので、TreePanelを構成しているElementへのクリックイベントを拾うようにしてみました。

＃日本語フォーラムは、もじばけが激しいので、「公式」にはアナウンスしてませんでした;)
＃もうしばらくかかりそうです・・・

[djodjo]

おおぉお！
なるほど。余白のel取ってきてクリックイベントですか。=D>


うまくいきましたありがとうございます。

>　公式・・・・
すみません。勇み足でした

[kiyoto01]

グリッドについては、個人的に Ext.ux.GridUnselector というのを作っているのですが、
ツリーもあるといいですねぇ。Ext.ux.TreeUnselector とか。
Yuki さんのコードを Plugin に置き換えるだけだと思いますが。

[yuki]

確かに、こういう場合はわざわざExtendするよりもプラグイン化してしまった方が、使い回せて便利ですよね。kiyoto01さんの、Ext.ux.GridUnselectorをもっと汎用的にするとか？（そして公開するとか:D）

あと、逆に質問なのですが、GridでもTreeでも「余白」が無くなってしまった場合（中身が増えて）、上記の僕のコードだと対応できないなと思ったのですが、Ext.ux.GridUnselectorではどうされているんですか？

（もじばけで読めないところがありますが、前後から推測してください・・・）

[djodjo]

横槍ですが、yukiさんにご提示いただいたソースを元にpluginにしてみました。
初めて書いたんですが、こんな感じかな？

余白がなくなった時のために、選択済みノードを再度クリックした際に
unselectしてクリックイベントを止めてみました。

どうでしょう。:">



Ext.ux.TreeUnselector = function(){

this.init = function(tree){
tree.on('render',function(tree){
var el = tree.getTreeEl();
el.on('click',function(e,t){
if(this.id == t.id){
tree.getSelectionModel().clearSelections();
}
},el);
})
tree.on('beforeclick',function(node,event){
if(node.isSelected()){
node.unselect();
return false;
}
})
};
}

追記2/17
BLOGにネタ使わせてもらいました。
サンプルもおいてみました。
http://djodjo.jp/archives/52
--------------------------
http://djodjo.jp

[yuki]

なるほど、これでバッチリですね

[kiyoto01]

なるほど ID でマッチングすればいいのか!
と思って、グリッドでやってみようと思ったのですが、グリッドはグリッドで GridView とか微妙な構成になっているようで、
一筋縄ではいかないようです。
TreePanel のようには、グリッド領域の id が取れない模様。。。

というわけで、じつにかっちょわるいのですが、DelayedTask を使って、(100ms以内に)click -> rowclick の間でイベントが来た場合は、選択解除をキャンセルするという処理法で実装しております。



Ext.ux.GridUnselector = function(cfg) {
cfg = cfg || {};
var grid, unselectTask;

// private プラグインの初期化
this.init = function(cmp) {
grid = cmp;

// カラの場所をクリックしたら、選択を解除する
unselectTask = new Ext.util.DelayedTask(function() {
var sm = grid.getSelectionModel();
if (typeof sm.clearSelections == 'function') {
sm.clearSelections(); // CellSelectionModel
} else {
sm.selectRows([]); // RowSelectionModel
}
});
grid.on({
rowclick: function() { unselectTask.cancel(); },
click: function() { unselectTask.delay(100); }
/*
// ダブルクリックで選択を解除してしまうのは微妙なので off
rowdblclick: function(grid, idx, e) {
var rec = grid.getStore().getAt(idx);
if (grid.getSelectionModel().isSelected(rec)) {
unselectTask.delay(100);
}
}
*/
});
};
};
ついでに、ダブルクリックの微妙な取扱いのコメントアウトがあったりして、、、
うーん、かっこわりぃ。

[yuki]

djodjoさんが既にサンプルを公開されていますが、、、サンプルを作ってみました：

Ext.ux.TreeUnselectorのサンプル (http://extjssamples-jp.googlecode.com/svn/trunk/tree/extuxtreeunselector.html)

上記サンプルとあと1つしか上がっていませんが、ここ (http://code.google.com/p/extjssamples-jp/)にサンプルを上げていこうと思うのですが、どなたか一緒にやりませんか？

Wikiもあるので、本家のラーニングセンターみたいにできたらな、と:D

[djodjo]

>どなたか一緒にやりませんか
いいです

[yuki]

では、メンバー登録しますので、このフォーラムのプライベートメッセージでGmailのアドレスを送ってください。

他に参加したい方がいらっしゃったらGmailのアドレスを送ってくださーい。

[yuki]

ついでにExt.ux.GridUnselectorプラグインも作ってみました:D

サンプル (http://extjssamples-jp.googlecode.com/svn/trunk/grid/extuxgridunselector.html)

[yuki]

なるほど ID でマッチングすればいいのか!
と思って、グリッドでやってみようと思ったのですが、グリッドはグリッドで GridView とか微妙な構成になっているようで、
一筋縄ではいかないようです。
TreePanel のようには、グリッド領域の id が取れない模様。。。


上の投稿（GridUnselector）で説明してなかったので、ちょっと説明します。

Gridの場合SelectionModelがあるので、ちょっと面倒なのですが、GridViewのmainBodyっていうプロパティが「行」の部分をさしているので、「それを含まない」ターゲットがクリックされた場合、というイベントを拾ってあげれば、「余白」でのイベントを拾えるようになります（ただし、CheckboxSelectionModelを使っている場合はプラスアルファの処理が必要なのですが、それはサンプルのコード (http://code.google.com/p/extjssamples-jp/source/browse/trunk/js/plugins/Ext.ux.GridUnselector.js)を見てみてください）

あと、選択済みの行（あるいはセル）について再度クリックしてUnselectするには、TreeUnselectorと似たような処理をしています（rowmousedown/cellmousedownというクリックの前に発生するイベント拾って、falseを返すような）。

という感じでどうでしょうか？