What's New?

[CLOSED] Menu Panel Icon alignment issue

  1. #1
    Apr 12, 2011, 12:38 AM

    [CLOSED] Menu Panel Icon alignment issue

    Hi,

    I am using MenuPanel in my system and I would like add Icons to MenuItems in MenuPanel, and those icons needs to align at right. I just added IconAlign="Right" but it is aligning leftside only (Actually there is no atrribute IconAlign for MenuItem. Can you please let me know how can I achieve this.
    Last edited by Daniil; Apr 25, 2011 at 7:51 AM. Reason: [CLOSED]
  2. #2
    Apr 12, 2011, 9:25 AM
    Hi,

    Unfortunately, Menu and MenuItem don't support custom icon align.

    You could try to achieve your requirement setting custom .IconCls.
  3. #3
    Apr 14, 2011, 6:14 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    Unfortunately, Menu and MenuItem don't support custom icon align.

    You could try to achieve your requirement setting custom .IconCls.
    What do you mean?? I need to be able to align the icon to the right of the menu text, and when you mouse over the icon I need to be able to show a tool tip. Is this possible, and if so...Exactly how do I do it?? Some of the words in our menus are not apparent to a user, and we want to be able to explain the purpose of the menu item and what the resulting page does. See attached.Click image for larger version.  Name: icon and tooltip in menu.png  Views: 277  Size: 86.5 KB  ID: 2591
  4. #4
    Apr 14, 2011, 7:13 PM
    Well, I meant that there is no property or something else to align an icon to right from text.

    You could try to set your custom .IconCls to achieve your requirement.
  5. #5
    Apr 14, 2011, 7:49 PM
    Here is an example.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        ResourceManager.GetInstance().RegisterIcon(Icon.Accept);
        ResourceManager.GetInstance().RegisterIcon(Icon.Add);
        ResourceManager.GetInstance().RegisterIcon(Icon.Anchor);
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    
     <script type="text/javascript">
        var addTab = function (tabPanel, id, url) {
            var tab = tabPanel.getComponent(id);

            if (!tab) {
                tab = tabPanel.add({ 
                    id       : id, 
                    title    : url, 
                    closable : true,                    
                    autoLoad : {
                        showMask : true,
                        url      : url,
                        mode     : "iframe",
                        maskMsg  : "Loading " + url + "..."
                    }                    
                });

                tab.on("activate", function () {
                    var item = MenuPanel1.menu.items.get(id + "_item");
                    
                    if (item) {
                        MenuPanel1.setSelection(item);
                    }
                }, this);
            }
            
            tabPanel.setActiveTab(tab);
        }
    </script>
    
    <style type="text/css">
        .my-align-1 {
            left: 70px !important;    
        }
        
        .my-align-2 {
            left: 68px !important;    
        }
        
        .my-align-3 {
            left: 60px !important;    
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        
        <ext:Window 
            runat="server" 
            Width="700" 
            Height="500" 
            Icon="Link" 
            Title="Adding tab"
            Layout="BorderLayout">
            <Items>
                <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                    <Menu runat="server">
                        <Items>
                            <ext:MenuItem ID="idClt_item" runat="server" Text="Ext.Net" IconCls="icon-accept my-align-1">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".my-align-1" Html="Hello 1!" />
                                </ToolTips>
                            </ext:MenuItem>
                            
                            <ext:MenuSeparator />
                            
                            <ext:MenuItem ID="idGgl_item" runat="server" Text="Google" IconCls="icon-add my-align-2">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://www.google.com');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".my-align-2" Html="Hello 2!" />
                                </ToolTips>
                            </ext:MenuItem>
                            
                            <ext:MenuSeparator />
                            
                            <ext:MenuItem ID="idExt_item" runat="server" Text="ExtJS" IconCls="icon-anchor my-align-3">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.extjs.com');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".my-align-3" Html="Hello 3!" />
                                </ToolTips>
                            </ext:MenuItem>
                        </Items>
                    </Menu>
                </ext:MenuPanel>
                <ext:TabPanel runat="server" Region="Center" />                               
            </Items>
        </ext:Window>
    </form>
</body>
</html>
    You could achieve the similar result using <img> tag.
  6. #6
    Jul 04, 2013, 3:56 AM

    I have the same requirement in 2.0

    Is this a feature request to submit to sencha?
  7. #7
    Jul 04, 2013, 5:03 AM
    Hi @michaeld,

    Maybe. Though I would not rely they implement it any time soon. There are quite many severe bugs which they should spend all the time on.

    Btw, here is a bit another approach. Tested with Ext.NET v2.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
     
     <script type="text/javascript">
        var addTab = function (tabPanel, id, url) {
            var tab = tabPanel.getComponent(id);
 
            if (!tab) {
                tab = tabPanel.add({ 
                    id       : id, 
                    title    : url, 
                    closable : true,                    
                    loader : {
                        url      : url,
                        renderer : "iframe",
                        loadMask : {
                            showMask : true,
                            msg      : "Loading " + url + "..."
                        }
                    }                    
                });
 
                tab.on("activate", function () {
                    var item = App.MenuPanel1.menu.items.get(id + "_item");
                     
                    if (item) {
                        App.MenuPanel1.setSelection(item);
                    }
                }, this);
            }
             
            tabPanel.setActiveTab(tab);
        }
    </script>
     
    <style type="text/css">
        .right-icon .x-menu-item-icon {
            position: relative;
            float: right;
        }

        .right-icon .x-menu-item-text {
            margin-right: 0px;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
         
        <ext:Window
            runat="server"
            Width="700"
            Height="500"
            Icon="Link"
            Title="Adding tab"
            Layout="BorderLayout">
            <Items>
                <ext:MenuPanel ID="MenuPanel1" runat="server" Width="200" Region="West">
                    <Menu runat="server">
                        <Items>
                            <ext:MenuItem 
                                ID="idClt_item" 
                                runat="server" 
                                Text="Ext.Net" 
                                Icon="Accept" 
                                Cls="right-icon">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idClt', 'http://www.ext.net');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".x-menu-item-icon" Html="Hello 1!" />
                                </ToolTips>
                            </ext:MenuItem>
                             
                            <ext:MenuSeparator />
                             
                            <ext:MenuItem 
                                ID="idGgl_item" 
                                runat="server" 
                                Text="Ext.NET Forums" 
                                Icon="Add" 
                                Cls="right-icon">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idGgl', 'http://forums.ext.net');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".x-menu-item-icon" Html="Hello 2!" />
                                </ToolTips>
                            </ext:MenuItem>
                             
                            <ext:MenuSeparator />
                             
                            <ext:MenuItem 
                                ID="idExt_item" 
                                runat="server" 
                                Text="Sencha" 
                                Icon="Anchor" 
                                Cls="right-icon">
                                <Listeners>
                                    <Click Handler="addTab(#{TabPanel1}, 'idExt', 'http://www.sencha.com');" />
                                </Listeners>
                                <ToolTips>
                                    <ext:ToolTip runat="server" Delegate=".x-menu-item-icon" Html="Hello 3!" />
                                </ToolTips>
                            </ext:MenuItem>
                        </Items>
                    </Menu>
                </ext:MenuPanel>

                <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" />                               
            </Items>
        </ext:Window>
    </form>
</body>
</html>
  8. #8
    Jul 09, 2013, 2:04 AM

    Thanks.

    I'll play with this.

Similar Threads

  1. [RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0
    By vs.mukesh in forum 2.x Help
    Replies: 2
    Last Post: Apr 02, 2012, 7:48 AM
  2. [CLOSED] Text Alignment issue
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 16, 2011, 1:51 PM
  3. [CLOSED] Is it possible Icon and Text alignment on Button?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 10, 2011, 10:23 PM
  4. [CLOSED] Grid Menu alignment disturbed
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 18, 2009, 8:47 AM
  5. [CLOSED] ASP Menu and ext:Panel issue
    By egodoy in forum 1.x Help
    Replies: 2
    Last Post: Dec 12, 2008, 1:53 PM

Tags for this Thread

Posting Permissions