[CLOSED] Menuitem is dissapearing after click

  1. #1

    [CLOSED] Menuitem is dissapearing after click

    In this scenario, when I click an menuitem, the javascript adds the tab correctly, but the menuitem dissapears after creating the tab.

    I cannot find such kind of behaive in the code.

    .aspx. I used the tagstring because if I use href it opens a new window, but I need it inside the tabpanel

                                <ext:Button ID="aa" runat="server" Text="Admin" Icon="User" Scale="Medium">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Listeners>
                                                <Click Fn="onMenuItemClick" />
                                            </Listeners>
                                            <Items>                    
                                                <ext:MenuItem runat="server" Text="U" Icon="GroupAdd" ID="aa000" TagString="U.aspx" />
                                                <ext:MenuItem runat="server" Text="A" Icon="GroupDelete" ID="aa001" TagString="A.aspx"/>
                                                <ext:MenuItem runat="server" Text="C" Icon="GroupEdit" ID="aa002" TagString="C.aspx"/>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
    ..
    ...
                <ext:TabPanel 
                    ID="tbApps" 
                    runat="server" 
                    Region="Center" 
                    Margins="0 4 4 0" 
                    Cls="tabs"
                    MinTabWidth="115">
                    <Items>
                        <ext:Panel 
                            ID="tabHome" 
                            runat="server" 
                            Title="Inicio"
                            HideMode="Offsets"
                            Icon="Application">
                            <Loader runat="server" Mode="Frame" Url="../00/">
                                <LoadMask ShowMask="true" Msg="Cargando..."/>
                            </Loader>
                        </ext:Panel>
                    </Items>
                    <Listeners>
                        <TabChange Fn="addToken" />
                    </Listeners>
                    <Plugins>
                        <ext:TabScrollerMenu PageSize="5" MaxText="100" />
                        <ext:TabCloseMenu />
                    </Plugins>
                </ext:TabPanel>
    IN javascript:

    var makeTab = function (id, url, title) {
        var win,
            tab,
            hostName,
            exampleName,
            tabTip;
    
        if (id === "-") {
            id = Ext.id(undefined, "extnet");
            lookup[url] = id;
        }
    
        tabTip = url.replace(/^\//g, "");
        tabTip = tabTip.replace(/\/$/g, "");
        tabTip = tabTip.replace(/\//g, " > ");
        tabTip = tabTip.replace(/_/g, " ");
    
        hostName = window.location.protocol + "//" + window.location.host;
        exampleName = url;
    // If I remove this code, obviously the tab isnot inserted, but the menuitem remains in the menu
        tab = App.tbApps.add(new Ext.Panel({
            id: id,
            tbar: [
                "->",
            {
                handler: function () {
                    Ext.getCmp(id).reload(true)
                },
                iconCls: "#ArrowRefresh"
            }],
            title: title,
            tabTip: tabTip,
            hideMode: "offsets",
    
            loader: {
                scripts: true,
                url: hostName + url, 
                renderer: "frame",
                loadMask: true,
                listeners: {
                    beforeload: function () {
                        this.target.body.mask('Cargando...');
                    },
                    load: {
                        fn: function (loader) {
                            var frame = loader.target.getBody();
    
                            if (!frame.Ext) {
                                swapThemeClass(frame, "", Ext.net.ResourceMgr.theme);
                            }
    
                            this.target.body.unmask();
                        }
                    }
                }
            },
            closable: true
        }));
        setTimeout(function () {
            App.tbApps.setActiveTab(tab);
        }, 250);
    };
    
    var lookup = {};
    
    var onMenuItemClick = function (item, menuItem, e) {
        loadApp(menuItem.tag, menuItem.getId(), menuItem.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;
    
        if (tab) {
            App.tbApps.setActiveTab(tab);
        } else {
            if (Ext.isEmpty(title)) {
                var m = /(\w+)\/$/g.exec(href);
                title = m == null ? "[EM]" : m[1];
            }
    
            title = title.replace(/<span>&nbsp;<\/span>/g, "");
            title = title.replace(/_/g, " ");
            makeTab(id, href, title);
        }
    };
    
    var getToken = function (url) {
        var host = window.location.protocol + "//" + window.location.host;
    
        return url.substr(host.length);
    };
    
    var addToken = function (el, tab) {
        if (tab.loader && tab.loader.url) {
            var token = getToken(tab.loader.url);
    
            if (!Ext.isEmpty(token)) {
                Ext.History.add(token);
            }
        } else {
            Ext.History.add("");
        }
    };
    Can you please help with this case?

    Thanks in advance
    Last edited by fabricio.murta; Feb 01, 2015 at 4:54 PM. Reason: [CLOSED]
  2. #2
    When creating a tab, append something to its ID so it does not conflict with the menu's.

    Look at this changed section of your javascript code.

    // If I remove this code, obviously the tab isnot inserted, but the menuitem remains in the menu
        tab = App.tbApps.add(new Ext.Panel({
            id: "tab" + id,
            tbar: [
    Then you will no longer have menu items being destroyed unintentionally.

    I hope this helps.
    Fabrício Murta
    Developer & Support Expert
  3. #3

    It works

    Thanks Fabricio, it worked.
  4. #4
    Great, I'll mark this thread as 'closed' then. Glad it helped.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] MenuItem Click does not work
    By jesperhp in forum 2.x Premium Help
    Replies: 2
    Last Post: Oct 08, 2013, 6:54 AM
  2. How to find the URL on click of menuitem
    By krishna in forum 1.x Help
    Replies: 1
    Last Post: Mar 31, 2011, 6:27 AM
  3. How to find the URL on click of menuitem
    By krishna in forum 1.x Help
    Replies: 1
    Last Post: Mar 31, 2011, 5:29 AM
  4. How to get parent menuItem when click menuItem?
    By zhangsir199 in forum 1.x Help
    Replies: 2
    Last Post: Jan 21, 2011, 2:58 AM
  5. Replies: 2
    Last Post: Oct 22, 2010, 11:04 AM

Tags for this Thread

Posting Permissions