[CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

  1. #1

    [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

    Hi,
    I'm trying to show an accordion menu like http://mvc.ext.net/ with Ext.Net 1.0.
    I tried with code-behind and markup and isn't works, only shows panels under AccordionLayout/Items.


    Thanks and sorry for my english!


        <ext:AccordionLayout ID="wmAccordion1" runat="server" Animate="true">
        <Items>
        <ext:Panel ID="acReports" runat="server" Border="false" Collapsed="true" Title="Reports">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem ID="mnCustomerAddressBook" runat="server" Text="Customer Address Book" Icon="Report">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Report/CustomerAddressBook/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>                
                                
                                <ext:MenuItem runat="server" Text="Total Sales By Employee" Icon="ChartBar">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Chart/TotalByEmployee/" Mode="Value" />
                                        <ext:ConfigItem Name="passParentSize" Value="true" Mode="Raw" />
                                    </CustomConfig>
                                </ext:MenuItem>            
                                
                                <ext:MenuItem runat="server" Text="Product Sales By Category" Icon="ChartBar">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Chart/ProductSalesByCategory/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>         
                            </Items>
                            <Listeners>
                                <ItemClick Handler="Northwind.addTab({ title: menuItem.text, url: menuItem.url, icon: menuItem.iconCls, passParentSize: menuItem.passParentSize});" />
                            </Listeners>
                        </Menu>                    
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        <ext:Panel ID="acCustomers" runat="server" Border="false" Collapsed="true" Title="Customers &amp; Orders">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem runat="server" Text="Top Ten Orders by Sales Amount" Icon="ApplicationDouble">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Customer/TopTenOrdersBySalesAmount/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>
                                <ext:MenuItem runat="server" Text="Customer Details" Icon="ApplicationForm">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Customer/CustomerDetails/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>
                                <ext:MenuItem ID="mnCustomerList" runat="server" Text="Customer List" Icon="ApplicationForm">
                                    <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Customer/CustomerList/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>
                                <%--<ext:MenuItem ID="wmMenuItem4" runat="server" Text="Order Details" Icon="ApplicationForm">
                                     <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Order/OrderDetails/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>--%>
                                <ext:MenuItem ID="mnOrderList" runat="server" Text="Order List" Icon="ApplicationForm">
                                     <CustomConfig>
                                        <ext:ConfigItem Name="url" Value="/Order/OrderList/" Mode="Value" />
                                    </CustomConfig>
                                </ext:MenuItem>
                            </Items>
                            <Listeners>
                                <ItemClick Handler="Northwind.addTab({ title: menuItem.text, url: menuItem.url, icon: menuItem.iconCls });" />
                            </Listeners>
                        </Menu>                    
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        <ext:Panel ID="wmPanel2" runat="server" Border="false" Collapsed="true" Title="Inventory &amp; Purchasing">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem runat="server" Text="Coming Soon" Icon="ApplicationForm" />
                            
                                <%--<ext:MenuItem ID="wmMenuItem6" runat="server" Text="Inventory List" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem7" runat="server" Text="Product Details" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem8" runat="server" Text="Purchase Order Details" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem9" runat="server" Text="Purchase Order List" Icon="ApplicationForm" />--%>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        <ext:Panel ID="wmPanel3" runat="server" Border="false" Collapsed="true" Title="Suppliers">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem runat="server" Text="Coming Soon" Icon="ApplicationForm" />
                                <%--<ext:MenuItem ID="wmMenuItem10" runat="server" Text="Supplier Details" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem11" runat="server" Text="Supplier List" Icon="ApplicationForm" />--%>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        <ext:Panel ID="wmPanel4" runat="server" Border="false" Collapsed="true" Title="Shippers">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem runat="server" Text="Coming Soon" Icon="ApplicationForm" />
                                <%--<ext:MenuItem ID="wmMenuItem12" runat="server" Text="Shipper Details" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem13" runat="server" Text="Shipper List" Icon="ApplicationForm" />--%>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        <%--<ext:Pa nel ID="wmPanel5" runat="server" Border="false" Collapsed="true" Title="Reports" Cls="white-menu">
        </ext:Panel>--%>
        <ext:Panel ID="wmPanel6" runat="server" Border="false" Collapsed="true" Title="Employees">
            <Content>
                <ext:FitLayout runat="server"><Items>
                    <ext:MenuPanel runat="server" Border="false" SaveSelection="false" Cls="white-menu">
                        <Menu>
                            <Items>
                                <ext:MenuItem runat="server" Text="Coming Soon" Icon="ApplicationForm" />
                                <%--<ext:MenuItem ID="wmMenuItem14" runat="server" Text="Employee Details" Icon="ApplicationForm" />
                                <ext:MenuItem ID="wmMenuItem15" runat="server" Text="Employee List" Icon="ApplicationForm" />--%>
                            </Items>
                        </Menu>
                    </ext:MenuPanel>
               </Items> </ext:FitLayout>
            </Content>
        </ext:Panel>
        </Items>
        </ext:AccordionLayout>
  2. #2

    RE: [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

    Hi,

    Did you add that AccordionLayout inside any container (Panel, Window and etc) ? Please post full test example

    Here is my test sample
    <%@ 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>MenuPanel - Ext.NET Examples</title>
        
        <script type="text/javascript">
            function MenuItemClick(menuItem) {
                CenterPanel.body.update(String.format("Clicked: {0}", menuItem.text)).highlight();            
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
            <h1>MenuPanel Example</h1>        
            
            <ext:Window runat="server" 
                Title="MenuPanel Window" 
                Icon="Accept"
                Closable="false" 
                CenterOnLoad="true" 
                Width="600" 
                Height="370">
                <Items>
                    <ext:BorderLayout runat="server">
                        <West Split="true">
                            <ext:Panel runat="server" Border="false" Width="350" Layout="Accordion">
                                <Items>
                                    <ext:MenuPanel runat="server" Title="Menu panel with selection saving" Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 3" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 4" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 5" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 6" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 7" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 8" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 9" Icon="ArrowRight" />
                                            </Items>
                                            <Listeners>
                                                <ItemClick Fn="MenuItemClick" />
                                            </Listeners>                                            
                                        </Menu>                                        
                                    </ext:MenuPanel>
                                    <ext:MenuPanel runat="server" Title="Menu panel without selection saving" SaveSelection="false" Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 3" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 4" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 5" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 6" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 7" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 8" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 9" Icon="ArrowRight" />
                                            </Items>
                                            <Listeners>
                                                <ItemClick Fn="MenuItemClick" />
                                            </Listeners>
                                        </Menu>
                                    </ext:MenuPanel>
                                    <ext:MenuPanel runat="server" Title="Menu with predefined selection" SelectedIndex="1" Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 3" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 4" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 5" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 6" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 7" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 8" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 9" Icon="ArrowRight" />
                                            </Items>
                                            <Listeners>
                                                <ItemClick Fn="MenuItemClick" />
                                            </Listeners>
                                        </Menu>
                                    </ext:MenuPanel>
                                    <ext:MenuPanel runat="server" Title="Menu 4" Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 3" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 4" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 5" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 6" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 7" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 8" Icon="ArrowRight" />
                                                <ext:MenuItem runat="server" Text="Point 9" Icon="ArrowRight" />
                                            </Items>
                                            <Listeners>
                                                <ItemClick Fn="MenuItemClick" />
                                            </Listeners>
                                        </Menu>
                                    </ext:MenuPanel>
                                    <ext:MenuPanel runat="server" Title="Menu 5" Icon="ArrowSwitch">
                                        <Menu runat="server">
                                            <Items>
                                                <ext:MenuItem ID="MenuItem1" runat="server" Text="Point 1" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem2" runat="server" Text="Point 2" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem3" runat="server" Text="Point 3" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem4" runat="server" Text="Point 4" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem5" runat="server" Text="Point 5" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem6" runat="server" Text="Point 6" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem7" runat="server" Text="Point 7" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem8" runat="server" Text="Point 8" Icon="ArrowRight" />
                                                <ext:MenuItem ID="MenuItem9" runat="server" Text="Point 9" Icon="ArrowRight" />
                                            </Items>
                                            <Listeners>
                                                <ItemClick Fn="MenuItemClick" />
                                            </Listeners>
                                        </Menu>
                                    </ext:MenuPanel>
                                </Items>
                            </ext:Panel>
                        </West>
                        <Center>
                            <ext:Panel ID="CenterPanel" runat="server" Title="Center" Padding="20" />
                        </Center>
                    </ext:BorderLayout>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
  3. #3

    RE: [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

    Hi,
    Ok, in markup works fine, but I can not make it work in code-behind (firebug says invalid label)
    Again, sorry for google-translated english!

    <%@ 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 id="Head1" runat="server">
        <title>MenuPanel - Ext.NET Examples</title>
        
        <script type="text/javascript">
            function MenuItemClick(menuItem) {
                alert(menuItem.text);
            }
        </script>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.MenuPanel menuPanelItems = new Ext.Net.MenuPanel();
            menuPanelItems.Title = "seccion";
            Ext.Net.Menu menuItems = new Ext.Net.Menu();
            Ext.Net.MenuItem item = new Ext.Net.MenuItem();
            item.Text="SubSeccion";
            menuItems.Items.Add(item);
            menuPanelItems.Items.Add(menuItems);
            pan.Items.Add(menuPanelItems);
        }
    </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="ViewPort1" runat="server">
            <Content>    
                <ext:BorderLayout ID="BorderLayout2" runat="server">
                    <North Margins-Bottom="4">
                        <ext:Toolbar ID="tbHeader" runat="server">
                            <Items>
                                <ext:Label 
                                    runat="server" 
                                    Html='home' 
                                    Icon="application" />
                                <ext:ToolbarFill ID="fill1" runat="server" />
                            </Items>
                        </ext:Toolbar>
                    </North>
                    <West Split="true">
                        <ext:Panel runat="server" id="pan" Border="false" Width="350" Layout="Accordion">
                            <Items>
                                <ext:MenuPanel runat="server" Title="Item" Icon="ArrowSwitch">
                                    <Menu ID="Menu1" runat="server">
                                        <Items>
                                            <ext:MenuItem ID="MenuItem1" runat="server" Text="Point 1" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem2" runat="server" Text="Point 2" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem3" runat="server" Text="Point 3" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem4" runat="server" Text="Point 4" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem5" runat="server" Text="Point 5" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem6" runat="server" Text="Point 6" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem7" runat="server" Text="Point 7" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem8" runat="server" Text="Point 8" Icon="ArrowRight" />
                                            <ext:MenuItem ID="MenuItem9" runat="server" Text="Point 9" Icon="ArrowRight" />
                                        </Items>
                                        <Listeners>
                                            <ItemClick Fn="MenuItemClick" />
                                        </Listeners>                                            
                                    </Menu>                                        
                                </ext:MenuPanel>
                            </Items>
                        </ext:Panel>
                     </West>
                     <Center>
                     <ext:Panel runat="server"></ext:Panel>
                     </Center>                
                </ext:BorderLayout>
            </Content>
        </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4

    RE: [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

    Hi,

    Please see the modified code of the Page_Load (you have to use existing Menu of the MenuPanel)

        protected void Page_Load(object sender, EventArgs e)
        {
            Ext.Net.MenuPanel menuPanelItems = new Ext.Net.MenuPanel();
            menuPanelItems.Title = "seccion";
            Ext.Net.Menu menuItems = menuPanelItems.Menu;
            Ext.Net.MenuItem item = new Ext.Net.MenuItem();
            item.Text="SubSeccion";
            menuItems.Items.Add(item);
            pan.Items.Add(menuPanelItems);
        }
  5. #5

    RE: [CLOSED] [1.0] Problem in AccordionLayout, MenuPanel, MenuItem

    Thanks!
    works!

Similar Threads

  1. Replies: 1
    Last Post: Sep 08, 2013, 5:10 AM
  2. [CLOSED] MenuPanel Get Selected MenuItem from client side (javascript)
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Nov 23, 2011, 3:15 PM
  3. Changing color or image of MenuItem inside MenuPanel
    By venu.sn2009 in forum 1.x Help
    Replies: 2
    Last Post: Jun 15, 2011, 10:02 AM
  4. [CLOSED] How to highlight menuitem in Menupanel
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 06, 2011, 3:24 PM
  5. [CLOSED] [1.0] Deselect menuItem in MenuPanel
    By x1000 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 03, 2010, 4:45 AM

Posting Permissions