2013-07-01 53 views
2

我有一個工具欄按鈕,點擊時,顯示一個菜單,我希望它是自動的。即鼠標懸停時的下拉菜單。我已經通過下面的代碼這樣做:工具欄菜單自動下拉鼠標懸停在extjs 4

xtype : 'button', 
       text : 'My Button', 
       listeners : { 
        mouseover : function() { 
         console.log('inside mouse over'); 
         this.showMenu(); 
        }, 
        menushow : function() { 
         console.log('menu shown'); 
         this.mouseLeaveMonitor = this.menu.el 
           .monitorMouseLeave(100, this.hideMenu, this); 
        }, 
        destroy : function(combo) { 
         combo.menu.el.un(combo.mouseLeaveMonitor); 
        } 
       }, 
       menu : [{ 
          text : 'menu item1' 
         }, { 
          text : 'menu item2', menu : [{text : 'text 1'}, {text : 'text 2'}] 
         }] 

好了,我的代碼工作正常的下拉菜單中,但在子菜單中失敗。任何人都可以幫忙嗎?

回答

0

我覺得這個人試圖完成同樣的事情你:ExtJS 4.1 "HoverButton" extension issue

你將需要補充的是有你的菜單配置爲目標的配置,而不是項目的數組的區別:

{ 
    xtype: 'hoverButton', 
    text : 'My Button', 
    menu : { 
     items: [{ 
      text : 'menu item1' 
     }, { 
      text : 'menu item2', 
      menu : { 
       items: [{text : 'text 1'}, {text : 'text 2'}] 
      } 
     }] 
    } 
} 
+0

是不適合我 –

+0

哪一部分它不爲你工作的工作? – kevhender

+0

菜單成功打開,但子菜單不起作用。 –

1

只能利用這一點,並應工作

xtype : 'button', 
text : 'My Button', 
listeners : { 
    mouseover : function() { 
     console.log('inside mouse over'); 
     this.showMenu(); 
    } 
}, 
menu : [{ 
    text : 'menu item1' 
}, { 
    text : 'menu item2', menu : [{text : 'text 1'}, {text : 'text 2'}] 
}]