Sencha touch 1.1工具栏只能获取最后一个html事件监听器

Question

我正在使用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触摸中做到这一点？