What's New?

[2.0] Menu problem with AccordionLayout

  1. #1
    Nov 28, 2012, 3:06 AM

    [2.0] Menu problem with AccordionLayout

    Hi, my code below has some issue:
    1. "Panel1" with AccordionLayout is unable to set style: color, font. Just background is fine.
    2. Menu panel "mn01" & "mn02" unable to change background like "Panel1", if change Layout other than AccordionLayout --> they changed
    3. Style menu-panel not work, i want to set background to transparent or white
    4. Menu panel "mn02" has quite many items --> a scroll bar is show, but i when scroll to bottom, why "item09" not visible completely
    5. Menu panel "mn01" set collapsed = true, "mn02" collapsed = false but not work
    
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="TestExtProject.WebForm3" %>

<%@ 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></title>
    <style type="text/css">
        .header-panel .x-panel-header
        {
            color: #333;
            font-weight: normal;
            font-size: 50px;
            font-family: tahoma,arial,verdana,sans-serif;
            border-color: #308450;
            background: Yellow;
        }
        
        .menu-panel .x-menu
        {
            background: Transparent;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="MainSiteForm" />
    <ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Title="Menu Panel" Layout="AccordionLayout"
                Border="true" Width="180" CollapseMode="Default" TitleCollapse="true" Cls="header-panel"
                Collapsible="true" AutoScroll="true" Height="300">
                <Items>
                    <ext:MenuPanel ID="mn01" runat="server" Border="false" SaveSelection="false" Title="Menu 01"
                        AutoScroll="true" Cls="menu-panel" Collapsed="true">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Item 01" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 02" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 03" Icon="Money" />
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:MenuPanel ID="mn02" runat="server" Title="Menu 02" Border="false" SaveSelection="false"
                        Cls="menu-panel" Collapsed="false">
                        <Menu ID="Menu3" runat="server" AutoScroll="true">
                            <Items>
                                <ext:MenuItem runat="server" Text="Item 01" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 02" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 03" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 04" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 05" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 06" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 07" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 08" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 09" Icon="Money" />
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Last edited by GolineTidus; Nov 28, 2012 at 5:58 AM.
  2. #2
    Dec 03, 2012, 2:29 AM
    Hello!

    Try following code:
    
<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <style type="text/css">
        .header-panel .x-panel-header
        {
            background: Yellow;
        }
        
        .header-panel .x-panel-header-text-default
        {
            font-weight: normal;
            font-size: 50px;
            font-family: tahoma,arial,verdana,sans-serif;
            border-color: #308450;
            background-color: Yellow;
        }
        
        .header-panel .x-menu-body .x-box-inner
        {
            background: red;
        }
        
        .header-panel .x-menu-item-text
        {
            font-size: 20px;
        }
        
        .menu-panel .x-menu
        {
            background: Transparent;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="MainSiteForm" />
    <ext:Viewport ID="ViewPort1" runat="server">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Title="Menu Panel" Layout="AccordionLayout"
                Border="true" Width="180" CollapseMode="Default" TitleCollapse="true" Cls="header-panel"
                Collapsible="true" AutoScroll="true" Height="300">
                <Items>
                    <ext:MenuPanel ID="mn01" runat="server" Border="false" SaveSelection="false" Title="Menu 01"
                        AutoScroll="true" Cls="menu-panel" Collapsed="true">
                        <Menu ID="Menu1" runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Item 01" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 02" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 03" Icon="Money" />
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                    <ext:MenuPanel ID="mn02" runat="server" Title="Menu 02" Border="false" SaveSelection="false"
                        Cls="menu-panel" Collapsed="false">
                        <Menu ID="Menu3" runat="server" AutoScroll="true">
                            <Items>
                                <ext:MenuItem runat="server" Text="Item 01" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 02" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 03" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 04" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 05" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 06" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 07" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 08" Icon="Money" />
                                <ext:MenuItem runat="server" Text="Item 09" Icon="Money" />
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>
    Override CSS rules as you see it is easy you just have to look through with FireBug or other Developer tool and find out what CSS classes you should use.

Similar Threads

  1. [CLOSED] Refresh issue with AccordionLayout panel.
    By bossun in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 17, 2012, 9:31 PM
  2. [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
  3. [CLOSED] BorderLayout, FitLayout, AccordionLayout - where are this classes in v2?
    By boris in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 29, 2012, 10:33 AM
  4. [CLOSED] How to call a function when the user clicks the collapse are in a AccordionLayout?
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 08, 2010, 5:28 PM
  5. [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem
    By miguelon in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 22, 2009, 2:48 PM

Posting Permissions