Extjs - Tree Panel expand event

Question

I want to create a tree panel and add an event to it when expand node, but code seems not work for me. I've already searched google for hours but no luck. Could anyone take a look and tell me why?

Here is my code:

Ext.onReady(function () {
    var store = Ext.create('Ext.data.TreeStore', {
        root: {
            expanded: true,
            children: [{
                text: "detention",
                leaf: true
            }, {
                text: "homework",
                expanded: false,
                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(),
        listeners: {
            afteritemexpand: function ( node, index, item, eOpts ){
                alert('HAHA');
            }
        }
    });
});

Thanks in advance!

Answer 1

You used the wrong event. You need to use afteritemexpand event.

afteritemexpand: function ( node, index, item, eOpts ){
    alert('HAHA');
}

Here's a fiddle:

http://jsfiddle.net/johanhaest/RDC9W/1/