土曜日, 2 月 14th, 2009 | Author: djodjo

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;
            }
        })
    };
}

Category: ExtJS
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response

  1. [...] サンプルにしては頼りないですが、以下はプラグインの記事 ●TreePanelの余白をクリックでフォーカスを解除する ●TabPanelのクローズ処理プラグイン [...]

Leave a Reply