Click menu items from a Ext.menu.Menu

4
votes

I have a button that once clicked, will expand a menu item, I want to be able to click one of those menu items programmatically through the java script console. Here's what i have for clicking the button, but need a little help on clicking the Ext.menu.Menu

var fireButton=Ext.ComponentQuery.query('button[itemId=buttonID]')[0]; //find button id
fireButton.fireEvent('click'); //open button/submenu

var ok = Ext.ComponentQuery.query('menuitem')[0]; //excess menu item

//how to click a menu item??

here's my menu:

menuButton: new Ext.menu.Menu({
    items: [
       {text: 'OK', value: 'ok'},
       {text: 'Next', value: 'next'},
    ],
    listeners: {
        click: 'onClickMenuButton',
    }

onClickMenuButtonItem: function(menu, item){
    this.makeVisible(menu, item);
},

makeVisible: function(menu, item){
        var menuItem = Ext.getCmp(item.value);
        menuItem.isVisible()){
        menuItem.setVisible(false);
        item.setIconCls('plusSign');
}),

var openMenu = Ext.ComponentQuery.query('button[itemId=buttonID]')[0];
openMenu.fireEvent('click', openMenu);
var clickMenu = Ext.ComponentQuery.query("menu")[0]
clickMenu.items.filter('text','OK').fireEvent('click'); //Don't work!
2
javascriptextjs
Why do you need to open the submenu to access it programatically? Is it already in the DOM? – evolutionxbox
testing purposes, Yes, it's already in the DOM. I just want to programmatically test it to see if it works as it should. – V Kid
I see. Does your open subnav have a class or data attribute to show that it is open? If so, you can target that to click it. – evolutionxbox
what do you mean? It does have a class, and I can excess the same thing like above using jquery, but not successful getting the menu items. – V Kid
I'm not sure how to write it in extjs, but in jQuery it'd look something like this: $('.sub-menu-open .item').eq(itemId).find('a').trigger('click'); – evolutionxbox

2 Answers

1
votes

I hope this fiddle is somewhat what you are looking for -

https://fiddle.sencha.com/#fiddle/lai

Notice that I'm providing cls: 'test' in one of the dynamically created items and then I'm using Ext.query(".test"); to get that item.

You can also search for the menuitem using this query - 

var item = Ext.ComponentQuery.query('menuitem{text.search( \'Item 1\' )!=-1}');
item[0].fireEvent('click')

And the menu item will have to register a click listener as - 

{
    text: 'Item 1' ,
    iconCls: 'add16',
    cls: 'test',
    listeners: {
        click: function(){
            console.log('clicked')
        }
    }
}
0
votes

xtype:menuitem has a method called -down- which will get you the first child. I'm not sure which version you're using so I'm linking to the latest docs; however, 4.x has this method as well.

It's worth noting that down can also take a selector as a parameter.

for ex (using cmp where itemid is set): 

this.down("#itemidvaluehere")

EDIT

update after your update showing your menu:

I would try it like this from the console: 

var mn=Ext.ComponentQuery.query("menu")[0]
mn.items.filter('text','OK').fireEvent('click');