[CLOSED] ext:MenuPanel: I wish show a 32x32 or 48x48 icon.

  1. #1

    [CLOSED] ext:MenuPanel: I wish show a 32x32 or 48x48 icon.

    Hi

    In ext:MenuPanel, I wish show a 32x32 or 48x48 png icon...

    The icons are resized to 16x16.

    <ext:MenuPanel ID="panelMain" runat="server" Flex="1" layout="FitLayout" AnchorHorizontal="100%" AnchorVertical="40%" BodyPadding="6">
                            <Menu runat="server">
                                <Items>
                                    <ext:MenuItem ID="mnSchedules" runat="server" Text="Agenda" IconUrl="/resources/images/toolbar/48x48/agendas.png"   />
                                    <ext:MenuItem ID="mnEmails" runat="server" Text="Email" IconUrl="/resources/images/toolbar/48x48/email2.png" />
                                </Items>
                            </Menu>
                        </ext:MenuPanel>
    Last edited by Daniil; Mar 28, 2012 at 8:29 PM. Reason: [CLOSED]
  2. #2
    Hi,

    There is no built-in functionality to support bigger icons.

    But, I think, it's possible via overriding CSS.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!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>Ext.NET v2 Example</title>
    
        <style type="text/css">
            .menu-big-icons .x-menu-icon-separator {
                left: 59px;
            }
            
            .menu-big-icons .x-menu-item-link {
                padding-left: 64px;
            }
            
            .icon-32x32 .x-menu-item-icon {
                width: 32px;
                height: 32px;
                line-height: 32px;
            }
            
            .icon-32x32 .x-menu-item-link {
                line-height: 32px;
            }
            
            .icon-48x48 .x-menu-item-icon {
                width: 48px;
                height: 48px;
                line-height: 48px;
            }
            
            .icon-48x48 .x-menu-item-link {
                line-height: 48px;
            }
        </style>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:MenuPanel 
            runat="server" 
            Height="300" 
            Width="300" 
            layout="FitLayout">
            <Menu runat="server" Cls="menu-big-icons">
                <Items>
                    <ext:MenuItem 
                        runat="server" 
                        Text="MenuItem" 
                        IconUrl="resources/images/32x32.png" 
                        Cls="icon-32x32" />
                    <ext:MenuItem 
                        runat="server" 
                        Text="MenuItem" 
                        IconUrl="resources/images/48x48.png" 
                        Cls="icon-48x48" />
                    <ext:MenuItem 
                        runat="server" 
                        Text="MenuItem" 
                        IconUrl="resources/images/32x32.png" 
                        Cls="icon-32x32" />
                </Items>
            </Menu>
        </ext:MenuPanel>
    </body>
    </html>
  3. #3
    Hi Daniil!

    Resizing icons works... but icon is rendered over the text menu item...

    Click image for larger version. 

Name:	Console 1.png 
Views:	73 
Size:	9.4 KB 
ID:	4035
  4. #4
    I think you didn't apply all things from my example.

    Did you set up
    Cls="menu-big-icons"
    for the Menu?

    Also don't forget about the respective CSS rules.
  5. #5
    Oh... I am sorry... you right...

    Works fine...

    Thanks a lot, Daniil....

Similar Threads

  1. [CLOSED] Ext icon not show
    By RCM in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Aug 09, 2012, 4:58 PM
  2. [CLOSED] Not show icon
    By trieu.tran in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jun 07, 2012, 7:25 AM
  3. Replies: 0
    Last Post: Mar 12, 2012, 7:26 AM
  4. Replies: 5
    Last Post: Mar 05, 2010, 3:15 PM
  5. Replies: 5
    Last Post: Nov 02, 2009, 12:31 PM

Posting Permissions