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

[PantherJuly]

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

[失去乐山贼]

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找的示例，你可以自己找着试一试。

[失去乐山贼]

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找的示例，你可以自己找着试一试。

[失去乐山贼]

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

[cnyangqi]

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

[大哥-你真棒]

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

[kevinwung]

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

[铛铛铛笨笨]

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