What's New?

[CLOSED] Accordion menu items with 32x32 icons

  1. #1
    Aug 20, 2012, 5:14 PM

    [CLOSED] Accordion menu items with 32x32 icons

    Hi,

    Could you please suggest CSS classes and their usage in the markup to get Accordion layout with 32x32 icons? If there's an example somewhere, please point me out to it.
    Last edited by Daniil; Aug 22, 2012 at 1:12 PM. Reason: [CLOSED]
  2. #2
    Aug 21, 2012, 9:34 AM
    Hi,

    I am not sure where exactly you need 32x32 icons. Please clarify with a screenshot and/or a code sample.
  3. #3
    Aug 21, 2012, 12:34 PM
    Hi Daniil,

    Something like this:

    <ext:Panel ID="PanelExplorer" runat="server" Title="Explorer" Width="200" Icon="FolderExplore"
	Layout="AccordionLayout" Collapsible="true" CollapseMode="Mini" Margins="0 0 4 4">
	<Items>
		<ext:MenuPanel ID="MenuPanelFileManagement" ItemID="MenuPanelFileManagement" runat="server"
			Title="File Management" Border="false">
			<Menu ID="MenuFileManagement" runat="server">
				<Items>
					<ext:MenuItem ID="mnFileOpen" ItemID="mnFileOpen" runat="server" Text="Open File" IconCls="file_open_32x32"></ext:MenuItem>
					<ext:MenuItem ID="mnFileNew" ItemID="mnFileNew" runat="server" Text="New File" IconCls="file_new_32x32"></ext:MenuItem>
				</Items>
			</Menu>
		</ext:MenuPanel>
		<ext:MenuPanel ID="MenuPanelPrint" ItemID="MenuPanelPrint" runat="server" Border="false" Title="Print Options">
			<Menu ID="MenuPrint" runat="server">
				<Items>
					<ext:MenuItem ID="mnPrint" ItemID="mnPrint" runat="server" Text="Print..." IconCls="print_32x32"></ext:MenuItem>
					<ext:MenuItem ID="mnPrintNow" ItemID="mnPrintNow" runat="server" Text="Print Now" IconCls="print_now_32x32"></ext:MenuItem>
				</Items>
			</Menu>
		</ext:MenuPanel>
	</Items>
</ext:Panel>
    I need to display 32x32 icons for menu items. Please refer to the sample screenshot attached. If there's a way to control how the menu item is layed out (next to the icon or underneath), that would be great to have, too.
    Attached Thumbnails Click image for larger version.  Name: Accordion32x32.png  Views: 105  Size: 11.2 KB  ID: 4657  
  4. #4
    Aug 21, 2012, 1:30 PM
    Here was the same request relating to Ext.NET v2.
    http://forums.ext.net/showthread.php?18101

    I think the same is possible with Ext.NET v1. But you will, probably, correct the CSS rules.

    Quote Originally Posted by vadym.f View Post
    If there's a way to control how the menu item is layed out (next to the icon or underneath), that would be great to have, too.
    Well, an icon is a part of MenuItem. I would try to achieve it using CSS as well, but not sure it will be possible and how difficult it may be.
  5. #5
    Aug 21, 2012, 3:35 PM
    Thanks Daniil! That was helpful. You can mark this thread as closed.

    Edit in: One more question on the topic. Is it possible to make the MenuItem font bold when the item is actually selected but not hovered on? I've found the CSS class for an active item (x-menu-item-active), what's the one for selected menu items?
  6. #6
    Aug 21, 2012, 6:18 PM
    Quote Originally Posted by vadym.f View Post
    Is it possible to make the MenuItem font bold when the item is actually selected but not hovered on? I've found the CSS class for an active item (x-menu-item-active), what's the one for selected menu items?
    Yes. This class is also applied when an item is hovered on.
  7. #7
    Aug 21, 2012, 7:03 PM
    Quote Originally Posted by Daniil View Post
    Yes. This class is also applied when an item is hovered on.
    Is it possible to make the font bold only when the menu item is selected? I'd like to keep the font regular weight when hovered over.
  8. #8
    Aug 22, 2012, 4:15 AM
    There is no such built-in functionality, but it is rather simple to achieve overriding some MenuPanel functions.

    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 Example</title>    

    <style type="text/css">
        .my-selected .x-menu-item-text {
            font-weight: bold;
        }
    </style>

    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

    <script type="text/javascript">
        Ext.net.MenuPanel.override({
            setSelection : function (item, e) {
                if (this.saveSelection) {
                    this.menu.items.each(function (item) {
                        item.container.removeClass(["x-menu-item-active", "my-selected"]);
                    }, this.menu);

                    item.container.addClass(["x-menu-item-active", "my-selected"]);
                }

                this.getSelIndexField().setValue(this.menu.items.indexOf(item));
            },

            clearSelection : function () {
                this.menu.items.each(function (item) {
                    item.container.removeClass(["x-menu-item-active", "my-selected"]);
                }, this.menu);
        
                this.getSelIndexField().setValue(null);
            }
        });
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:MenuPanel ID="MenuPanel1" runat="server">
        <Menu runat="server">
            <Items>
                <ext:MenuItem runat="server" Text="Item 1" />
                <ext:MenuItem runat="server" Text="Item 2" />
            </Items>
        </Menu>
    </ext:MenuPanel>
</body>
</html>
  9. #9
    Aug 22, 2012, 1:03 PM
    That was exactly what I've been looking for, thanks much Daniil!! Please close this thread down.

Similar Threads

  1. Please help me to create a menu and the menu items needs to take from sql table column values
    By Balaji in forum 1.x Help
    Replies: 0
    Last Post: Aug 09, 2012, 5:37 AM
  2. Custom collapse/expand icons for accordion layout panesl
    By SMS in forum 1.x Help
    Replies: 11
    Last Post: May 03, 2011, 12:56 PM
  3. Expand all panel items in accordion layout
    By DavidS in forum 1.x Help
    Replies: 4
    Last Post: Nov 25, 2010, 6:24 AM
  4. [CLOSED] [1.0] MVC sample west menu has no menu items
    By Inoventus in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Nov 24, 2009, 4:06 AM
  5. Dynamic Accordion Items
    By danr in forum 1.x Help
    Replies: 3
    Last Post: Jan 09, 2009, 9:13 PM

Tags for this Thread

Posting Permissions