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

Printable View

Mar 28, 2012, 5:56 PM
supera

[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.

Code:

<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>
Mar 28, 2012, 7:46 PM
Daniil

Hi,

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

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

Example

Code:

<%@ 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>
Mar 28, 2012, 7:58 PM
supera

1 Attachment(s)

Hi Daniil!

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

Attachment 4035
Mar 28, 2012, 8:01 PM
Daniil

I think you didn't apply all things from my example.

Did you set up

Code:

Cls="menu-big-icons"

for the Menu?

Also don't forget about the respective CSS rules.
Mar 28, 2012, 8:27 PM
supera

Oh... I am sorry... you right...

Works fine...

Thanks a lot, Daniil....