TreePanel itemmouseenter

Code:

{    "text": ".",
    "children": [
        {
            "id":1,
            "task": "Task1",
            "iconCls": "task-folder",
            "expanded": false,
            "children": [
                {
                    "id":2,
                    "task": "Task2",
                    "iconCls": "task-folder",
                    //"expanded": true,
                    "children": [
                        {
                            "id":3,
                            "task": "Task3",
                            "leaf": true,
                            "iconCls": "task"
                        }, {
                            "id":4,
                            "task": "Task4",
                            "leaf": true,
                            "iconCls": "task"/*,
                            "done": true*/
                        }
                    ]
                }, {
                    "id":5,
                    "task": "Task5",
                    "iconCls": "task-folder",
                    "leaf": true
                }
            ]
        }, {
            "id":6,
            "task": "Task6",
            "iconCls": "task-folder",
            "children": [
                {
                    "id":7,
                    "task": "Task7",
                    "iconCls": "task-folder",
                    "leaf": true
                }, {
                    "id":8,
                    "task": "Task8",
                    "iconCls": "task-folder",
                    "leaf": true
                }
            ]
        }
    ]
}

Code:

Ext.define('Task2', {            extend: 'Ext.data.TreeModel',
            //extend: 'KitchenSink.model.tree.Base',
            fields: [{
                name: 'task',
                type: 'string'
            }]
        });
        var store2 = Ext.create('Ext.data.TreeStore', {
            model: 'Task2',
            proxy: {
                type: 'ajax',
                url: 'data/menu.json'
            }//,
            //folderSort: true
        });

Code:

{                    xtype:'treepanel',
                    //autoScroll:true,
                    //reserveScrollbar: true,
                    //title: 'Core Team Projects',
                    useArrows: true,
                    rootVisible: false,
                    //multiSelect: true,
                    singleExpand: true,
                    listeners:{
                        itemmouseenter: function( obj, record, item, index, e, eOpts ){
                            //alert('itemmouseenter');
                            var me = this;
                            if (me.isExpanded ===true) return;
                            try{
                            if (index>=0 && item && !record.get('leaf') && record.get('id')) {
                                me.isExpanded = true;
                                me.expandPath(record.getPath(), 'id', '/', function(){
                                    me.isExpanded = false;
                                });
                            }
                            } catch(ex) {
                                console.log(record);
                                console.log(item);
                                console.log(index);
                                console.log(ex);
                                me.isExpanded = false;
                            }
                        }
                    },


                    store: store2,
                    columns: [{
                        xtype: 'treecolumn', //this is so we know which column will show the tree
                        text: 'Menu',
                        flex: 2,
                        sortable: false,
                        dataIndex: 'task'
                    }]
                }

Sometimes, there are duplicates and artifacts of data.

Error if often carry on the panel:

Cannot read property 'id' of null
at Ext.define.animate

at Ext.define.onCollapse

at Ext.define.doFire...