CODEWITHSUNDEEP
javascriptextjs
V Kid
V Kid

Reputation: 117

Click menu items from a Ext.menu.Menu

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!

Upvotes: 4

Views: 4676

Answers (2)

Hardrada
Hardrada

Reputation: 728

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');

Upvotes: 0

Yellen
Yellen

Reputation: 1780

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')
        }
    }
}

Upvotes: 1

Related Questions