Extjs4.0里如何实现单击展开和收起tree的节点

Question

请教您个问题，Extjs4.0里如何实现单击展开和收起tree的节点啊，用3.0的方法完全不行啊！请帮帮忙吧！

Answer 1

Ext.require(['*']);Ext.onReady(function(){
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get-nodes.php'
        },
        root: {
            text: 'Ext JS',
            id: 'src',
            expanded: true
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });    var tree = Ext.create('Ext.tree.Panel', {
        id: 'tree',
        store: store,
        width: 250,
        height: 300,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                appendOnly: true
            }
        },
        renderTo: document.body
    });    var store2 = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get-nodes.php'
        },
        root: {
            text: 'Custom Ext JS',
            id: 'src',
            expanded: true,
            children: []
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });    var tree2 = Ext.create('Ext.tree.Panel', {
        id: 'tree2',
        width: 250,
        height: 300,
        store: store2,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                appendOnly: true
            }
        },
        renderTo: document.body
    });
});
从D:\ext-4.0.0-gpl\ext-4.0.0\examples\tree找的示例，你可以自己找着试一试。

Answer 2

Ext.require(['*']);Ext.onReady(function(){
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get-nodes.php'
        },
        root: {
            text: 'Ext JS',
            id: 'src',
            expanded: true
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });    var tree = Ext.create('Ext.tree.Panel', {
        id: 'tree',
        store: store,
        width: 250,
        height: 300,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                appendOnly: true
            }
        },
        renderTo: document.body
    });    var store2 = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'get-nodes.php'
        },
        root: {
            text: 'Custom Ext JS',
            id: 'src',
            expanded: true,
            children: []
        },
        folderSort: true,
        sorters: [{
            property: 'text',
            direction: 'ASC'
        }]
    });    var tree2 = Ext.create('Ext.tree.Panel', {
        id: 'tree2',
        width: 250,
        height: 300,
        store: store2,
        viewConfig: {
            plugins: {
                ptype: 'treeviewdragdrop',
                appendOnly: true
            }
        },
        renderTo: document.body
    });
});
从D:\ext-4.0.0-gpl\ext-4.0.0\examples\tree找的示例，你可以自己找着试一试。

Answer 3

ext-4.0
var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true, 
        text:"",
        user:"",
        status:"", 
        children: [
            { text:"detention", leaf: true },
            { text:"homework", expanded: true, 
                children: [
                    { text:"book report", leaf: true },
                    { text:"alegrbra", leaf: true}
                ]
            },
            { text: "buy lottery tickets", leaf:true }
        ]
    }
});     Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,        
    renderTo: Ext.getBody()
});

Answer 4

这个例子也太
itemclick( Ext.view.View this, Ext.data.Model record, HTMLElement item, Number index, Ext.EventObject e)
实现这个事件即可。 

Answer 5

var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true, 
        text:"",
        user:"",
        status:"", 
        children: [
            { text:"detention", leaf: true },
            { text:"homework", expanded: true, 
                children: [
                    { text:"book report", leaf: true },
                    { text:"alegrbra", leaf: true}
                ]
            },
            { text: "buy lottery tickets", leaf:true }
        ]
    }
});     Ext.create('Ext.tree.Panel', {
    title: 'Simple Tree',
    width: 200,
    height: 150,
    store: store,
    rootVisible: false,        
    renderTo: Ext.getBody()
});

Answer 6

listeners: {
        'itemclick': function (view, record) {
            var id = record.get('id');
            var text = record.get('text');
            var tabPanel = Ext.getCmp('MainTabPanel');
            var leaf = record.get('leaf');
            var tab = tabPanel.getComponent(id);
            if (leaf) {
                if (!tab) {
                    tabPanel.add(Ext.create('Tesz.App.Pages.' + id)).show();
                    tabPanel.setActiveTab(tab);
                }
            }
            else {
                var expand = record.get('expanded')
                if (expand) {
                    view.collapse(record);
                }
                else {
                    view.expand(record);
                }
            }
        }
    }

Answer 7

重写Ext.tree.View 的 onItemDblClick方法
code:
Ext.override(Ext.tree.View, {  
onItemDblClick: function() {
        this.callParent(arguments);
        //not expand or collapse
     }
});