ExtJS中給Tree節點加click事件

標籤：blog   http   io   os   ar   使用   strong   sp   on   

第一種：

       直接通過TreePanel中的Config Option中的listener來添加，代碼如下：

    var TreePan = new Ext.tree.TreePanel({

        id: ‘TreePan‘,

        title: "側邊欄",

        useArrows: true,

        width: 240,

        height: 660,

        region: ‘west‘,

        frame: true,

        autoScroll: true,

        enableDD: false,

        containerScroll: true,

        draggable: false,

        root: root,

        rootVisible: false,

        collapsible: true,

        collapsed: true,

        animate: true,

        listeners: {

            ‘click‘: function(node, e) {

                if (node.isLeaf()) {

                    var newWin = new Ext.Window({

                        width: 745,

                        height: 529,

                        title: "現用技術標準",

                        html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

                    });

                    newWin.show();

                }

            }       

 }

 

失敗，表現為程式對 “node.isLeaf()”這個方法的識別有問題，加上這條if語句，則點擊所有節點沒反應（包括非分葉節點）；去掉這個if，則點所有節點都會出現新視窗（包括非分葉節點）。

 

     第二種：

     使用TreePan.on來添加Event，代碼如下：

 

    var TreePan = new Ext.tree.TreePanel({

        id: ‘TreePan‘,

        title: "側邊欄",

        useArrows: true,

        width: 240,

        height: 660,

        region: ‘west‘,

        frame: true,

        autoScroll: true,

        enableDD: false,

        containerScroll: true,

        draggable: false,

        root: root,

        rootVisible: false,

        collapsible: true,

        collapsed: true,

        animate: true, 

 }

TreePan.on(‘click‘, BiaoZhunClick);

 

    function BiaoZhunClick(node, e) {

        if (node.leaf) {

            //            e.stopEvent();

            var newWin = new Ext.Window({

                width: 745,

                height: 529,

                title: "現用技術標準",

                html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

            });

            newWin.show();

        }

    }

 

失敗，表現如方法二。

 

     第三種：

     通過查API Document，知道可以用addListener這個方法來給TreePanel添加Event，於是嘗試如下：

 

    var TreePan = new Ext.tree.TreePanel({

        id: ‘TreePan‘,

        title: "側邊欄",

        useArrows: true,

        width: 240,

        height: 660,

        region: ‘west‘,

        frame: true,

        autoScroll: true,

        enableDD: false,

        containerScroll: true,

        draggable: false,

        root: root,

        rootVisible: false,

        collapsible: true,

        collapsed: true,

        animate: true, 

 }

    TreePan.addListener(‘click‘, BiaoZhunClick);

    function BiaoZhunClick(node, e) {

        if (node.leaf) {

            //            e.stopEvent();

            var newWin = new Ext.Window({

                width: 745,

                height: 529,

                title: "現用技術標準",

                html: "<iframe src=/"Manage/VolunteerShipInfo.aspx/" marginheight=/"0/" marginwidth=/"0/" width=/"727/" height=/"500/"></iframe>"

            });

            newWin.show();

        }

    }

 

成功，終於可以實現只有在點擊分葉節點時才彈出浮窗了。

 轉自：http://blog.csdn.net/scythev/article/details/4818610

 

ExtJS中給Tree節點加click事件