2013-10-30 62 views
0

問題如下: 我有一個菜單,我希望它隱藏和顯示鼠標經過的elemens,我用mouseover和mouseout事件得到它,但事實是,我實際上不能選擇下拉菜單中的一個項目,因爲它會消失,我想這可能是因爲dom的問題,但我不太清楚,任何幫助表示讚賞!代碼如下:分機4問題mouseover,mouseout和下拉菜單

var PanelMuestra = Ext.extend(Ext.Panel, { 
    width : 850 , 
    height : 250, 
    style : 'margin-top:15px', 
    bodyStyle: 'padding:10px', 
    renderTo : Ext.getBody(), 
    html  : fakeHTML, 
    autoScroll: true 
}); 
new PanelMuestra({ 
    title: 'Menu', 
    tbar: [{ 
     xtype:'splitbutton', 
     text: 'Nuevo aca', 
     listeners : { 
      mouseover : function() { 
       console.log('Dentro del area'); 
       this.showMenu(); 
      }, 
      mouseout: function (b) { 
       console.log('Fuera del area'); 
       b.hideMenu(); 
       //Ext.menu.Manager.hideAll(); 
      } 


     }, 
     menu: [{text: 'Ejemplo boton 1'}] 
    },'-',{ 
     xtype:'splitbutton', 
     text: 'Relleno', 
     menu: [{text: 'Cut Menu Item'}] 
    },'-',{ 
     text: 'Relleno' 
    },'-',{ 
     text: 'Relleno', 
     menu: [{ 

      text: 'Cut Menu Item' 

     }] 
    },'-',{ 
     text: 'Relleno' 
    }] 
}); 

回答

0

你不應該顯示和隱藏自定義事件的菜單。下拉菜單本身支持在ExtJS的4

這裏是用下拉菜單

Ext.define('Mb.view.TestMenu', { 
    extend: 'Ext.button.Button', 
    xtype: 'winbiz-menu', 
    text: 'Test Menu', 
    icon: Paths.img + 'page_white_winbiz.png', 
    menu: { 
     items: [{ 
      text: 'Export, 
      itemId: 'export' 
     },{ 
      text: Lang._('Test') 
      itemId: 'test' 
     }] 
    } 
}); 
的按鈕的簡單的例子