[CLOSED] Need Menuitemclick on clientside

[rguardado]

Hi, I'm trying to have a button with menuitems , and for each click of the menuitems, fire a javascript to load an app, like the

Instead of having the treemenu of the examples, I want to have a menu(buttons with menuitems) in the upper side.


this is the javascript, yes it is not working:

var onMenuItemClick = function (mi,e) { /*which parameters are passed to the function?*/
    e.stopEvent();  /*?*/
    loadApp(mi.get('href'), mi.getId(), mi.get('text'));
};

var loadApp = function (href, id, title) {
    var tab = App.tbApps.getComponent(id),
        lObj = lookup[href];

    if (id == "-") {
        App.direct.GetHashCode(href, {
            success: function (result) {
                loadApp(href, "e" + result, title);
            }
        });

        return;
    }

    lookup[href] = id;

and this the .aspx code, here is where I need help for coding the javascript calls for each menuitemclick:

                 <ext:Toolbar runat="server" Flat="true">
                        <Items>
                            <ext:Button ID="aa" runat="server" Text="Admin" Icon="User" Scale="Medium" Visible="false">
                                <Menu>
                                    <ext:Menu runat="server">
                                        <Listeners>
                                            <Click Handler="onMenuItemClick();" /> /* Where does this javascript call need to be placed? */
                                        </Listeners>
                                        <Items>                    
                                            <ext:MenuItem runat="server" Text="Users" Icon="GroupAdd" ID="aa000" Href="U.aspx" />
                                            <ext:MenuItem runat="server" Text="Audits" Icon="GroupDelete" ID="aa001" Href="A.aspx"/>
                                            <ext:MenuItem runat="server" Text="AppConfig" Icon="GroupEdit" ID="aa002" Href="S.aspx"/>
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:Button>

Thanks in advance.

[Daniil]

Hi @rguardado,

<Click Handler="onMenuItemClick();" />

You don't pass any parameters to a call, so, there is no parameters.

You can find out the parameters here.
https://examples3.ext.net/#/Events/Listeners/Arguments

Select "Menu" widget and "Click" event you'll see:

function(item, menuItem, e)

It means that you can do:

<Click Handler="onMenuItemClick(item, menuItem, e);" />

You can also use Fn instead of Handler.

So, you can do the following:

<Click Fn="onMenuItemClick" />

When the onMenuItemClick function will be called automatically with all the parameters.

I recommend to read this blog post about event in Ext.NET. As far as I can remember, there is also an explanation of the difference between Fn and Handler.
http://ext.net/introduction-to-ext-net-events

This is a docs article about a Menu's Click event that is also helpful to read.
http://docs.sencha.com/extjs/5.1/5.1...nu-event-click

[rguardado]

Thanks for relplying. It is working right now.

This is the correct javascript:

I changed the javascript call:

var onMenuItemClick = function (item, menuItem, e) {
    e.stopEvent();
    loadApp(menuItem.href, menuItem.getId(), menuItem.text));
};