TreePanelで、一度ノードを選択すると未選択状態にできないので
余白をクリックした際にフォーカスが外れるようにしたいと思って、なやんでExtのフォーラムに投稿したらお返事が！
http://extjs.com/forum/showthread.php?t=59247

TreePanelのElementをとってきて、それにclickイベントを設定する方法を教えてもらいました。
で、スレッドでもこういうのはプラグインにすると便利ということなので作ってみました。

フォーラムより

TreePanelがtplとして、

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

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

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

なるほど。
で、プラグインにすると便利ということなので作ってみました。

サンプルデモ：Ext.ux.TreeUnselector and ダウンロード

/*
 * Ext.ux.TreeUnselector
 * Copyright(c) 2009, djodjo.jp
 */
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;
            }
        })
    };
}

Tweet