4

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!
V Kid
  • 117
  • 4
  • 12
  • Why do you need to open the submenu to access it programatically? Is it already in the DOM? – evolutionxbox Apr 15 '15 at 16:39
  • 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 Apr 15 '15 at 16:40
  • 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 Apr 15 '15 at 16:43
  • 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 Apr 15 '15 at 16:49
  • 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 Apr 15 '15 at 16:57
  • i don't think the menu id have an class, only the button has a class. – V Kid Apr 15 '15 at 17:00
  • Unless someone can think of some other way of targeting the opened submenu, I'm not sure it's possible without some sort of "hook" (a class or identifier). – evolutionxbox Apr 15 '15 at 17:03
  • When creating the menu items, if you could, assign a cls attribute (need not be an actual css class) then you can easily get a reference to the menu items by using that cls attribute that you assigned as a selector in your query. – Yellen Apr 15 '15 at 17:40

2 Answers2

1

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')
        }
    }
}
Yellen
  • 1,785
  • 16
  • 35
  • var ok Ext.ComponentQuery.query('menuitem{text.search( \'You menu item text\' )!=-1}'); ok.fireEvent('click'); how can i fire an event to that specific menu item search ? it doens't support fireEvent – V Kid Apr 15 '15 at 18:18
  • The query will return an array of objects if they match the criteria. If you've a single item with that text then you can be sure that your array will contain only that item and this you can access as the first element of the array – Yellen Apr 15 '15 at 18:28
  • ok, so it works but then, it's not doing what it's suppose to do, what its suppose to do is, once a menu item is clicked, it's suppose to set visiblity to a region of the webpage such as an table view or grid view. its not doin so. – V Kid Apr 15 '15 at 18:33
  • Can you confirm if the click is fired? If so, then the subsequent problem can only be understood if you can show more of the code. – Yellen Apr 15 '15 at 18:35
  • is there a way to confirm that? after running the code, it just return a "true" – V Kid Apr 15 '15 at 18:41
  • You must have defined a click listener function!! If you listener is invoked than what you've written inside that function will be executed. To be sure, if you want to, add a console.log or an alert at the beginning to see if it is invoked. And I cannot comment as what is returning true without seeing some of the code. – Yellen Apr 15 '15 at 18:45
  • Ok, so to clarify, it is a button once click, will open an Ext.menu.Menu, i need to click an item off that menu. – V Kid Apr 15 '15 at 18:45
0

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');
Hardrada
  • 728
  • 8
  • 19
  • what if your menu items don't have an itemID ? by the way, there's no xtype:menuitem, it's only a button that once click will show sort of an menu with items to be able to click, is that still the same? – V Kid Apr 15 '15 at 18:01
  • To answer your first question: you can use a component query : http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.ComponentQuery . As for your second question, I have to ask if you are using a standard extjs menu? Can you add more code to your OP to help clarify the objects you're working with a little better. – Hardrada Apr 15 '15 at 18:37
  • Ok, so to clarify, it is a button once click, will open an Ext.menu.Menu, i need to click an item off that menu. – V Kid Apr 15 '15 at 18:45
  • see if this fiddle is what you're trying to accomplish:https://fiddle.sencha.com/#fiddle/lap NOTE: I Did not do the expand menu..just the click of the menu item. – Hardrada Apr 15 '15 at 19:21
  • yeah, but I'm trying to do this through the java script console, programmatically click it. – V Kid Apr 15 '15 at 19:25
  • Click the button? Ext.getCmp("buttonidhere").fireEvent('click'); – Hardrada Apr 16 '15 at 02:04
  • not the button, i already can click the button, i need to click the menu items – V Kid Apr 16 '15 at 13:10
  • exchange the button id with the menu item id, OR get access to the menu and use the down() function. ex: Ext.getCmp("menuItemIdHere").fireEvent('click') – Hardrada Apr 16 '15 at 15:37
  • the menu items don't have id's. they are just text. here's an example of the menuitem/button, updated my post. – V Kid Apr 16 '15 at 15:46
  • Ok, i see what's happening, there's no event happening when click on an menu item, what happens once clicked, is it just set a container id to visible(true) or visible (false). How can i mimic that action? – V Kid Apr 16 '15 at 17:54