PDA

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



supera
Mar 28, 2012, 6:56 PM
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>

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

supera
Mar 28, 2012, 8:58 PM
Hi Daniil!

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

4035

Daniil
Mar 28, 2012, 9:01 PM
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.

supera
Mar 28, 2012, 9:27 PM
Oh... I am sorry... you right...

Works fine...

Thanks a lot, Daniil....