Sencha touch Sencha touch 1.1工具栏仅获取最后一个html事件侦听器

我正在使用sencha touch 1.1编写网页。我编写了以下工具栏代码：

MyApp.views.ListCat1 = new Ext.Toolbar({
        id: 'ListCat1',
        title: 'Category 1',
        width: 300,
        listeners: {
            mouseout: {
                element: 'el',
                fn: function(){
                    MyApp.views.viewport.remove(MyApp.views.listPanel, false);
                    MyApp.views.viewport.doLayout();
                }
            },
            mouseover: {
                element: 'el',
                fn: function(){
                    MyApp.views.viewport.add(My.views.listPanel);
                    MyApp.views.viewport.doLayout();
                    MyApp.views.listPanel.setPosition(MyApp.views.ListCat1.getWidth(), (-1) * MyApp.views.ListContainer.getHeight());
                }
            }
        }
    });

工具栏仅获取最后一个侦听器。在这种情况下，它将是鼠标悬停。如果事件顺序相反（首先声明mouseover，然后声明mouseout），工具栏将只获取mouseout侦听器

代码中有什么错误吗？有没有更好的方法在同一个元素上设置两个侦听器

谢谢

---

使用标准javascript事件，我可以处理另一个DOM事件，但我更喜欢只使用sencha内容

        MyApp.views.ListCat1 = new Ext.Toolbar({
        id: 'ListCat1',
        title: 'Category 1',
        width: 300,
        listeners: {
            mouseover: {
                element: 'el',
                fn: function() {
                    MyApp.views.viewport.add(MyApp.views.listPanel);
                    MyApp.views.viewport.doLayout();
                    MyApp.views.listPanel.setPosition(MyApp.views.ListCat1.getWidth(), (-1) * MyApp.views.ListContainer.getHeight());
                    console.log('mouseover');
                }
            }
        },
        afterRender: function(){
            window.addEventListener('mouseout', handleMO, false);
        }
    });

    function handleMO(event){
        if (event.target.id == MyApp.views.ListCat1.el.id){
            MyApp.views.viewport.remove(MyApp.views.listPanel, false);
            MyApp.views.viewport.doLayout();
            console.log('mouseout');
        };
    }

有没有一种方法可以用纯sencha触感来做这件事