[CLOSED] Side Menu hidden

  1. #1

    [CLOSED] Side Menu hidden

    Hello.
    I'm trying to develop a menu bar at left side that is hidden when the form is open, but is opened when a button is clicked,
    like the menus shown in https://mobile.ext.net/#demo/menus
    or the side menu shown in the ext.net examples page at top, right of ComboBox of EXT.Net versions: https://examples.ext.net/
    I tried to use the same controls as in the Ext.Net mobile library (there, it was possible to put a side to Menu control), but
    here it doesn't exists the Side property in Menu control.
    I have tried to implement the Ext.ActionSheet control that exists in ExtJs:
    https://docs-devel.sencha.com/extjs/...tionSheet.html, but it seems not possible to load that control with this library.
    This is the error shown in Firefox 89.0 console
    Click image for larger version. 

Name:	errorfirefox.png 
Views:	6 
Size:	7.5 KB 
ID:	25534
    I'm using Visual Studio 2015, with EXT.Net 5.3, .Net Framework 4.6 and Windows 10.

    It is possible to reproduce this effect?

    This is the code that i'm trying now:


    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PruebaMenuResponsive2.aspx.vb" Inherits="websilon.PruebaMenuResponsive2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
    
    
            Ext.define('KitchenSink.view.Menus', {
                extend: 'Ext.Panel',
               // requires: ['Ext.Menu'],
    
                cls: 'demo-solid-background',
                shadow: true,
                padding: 20,
                scrollable: true,
                defaults: {
                    xtype: 'button',
                    cls: 'demobtn',
                    margin: '10 0'
                },
                items: [
                    {
                        xtype: 'component',
                        styleHtmlContent: true,
                        html: [
                            '<b>Ext.Menu</b> is a component which allows you to easily display sliding',
                            'menus from any side of the screen.<br /><br />You can show the menus by either tapping the buttons below,',
                            'or by swiping from the edge of the screen.'
                        ].join('')
                    },
                    {
                        text: 'Toggle left menu (reveal)',
                        handler: function () {
                            Ext.Viewport.showMenu('left');
                        }
                    },
                    
                     
                ],
    
                initialize: function () {
                    
                },
    
                doDestroy: function () {
                    Ext.Viewport.removeMenu('left');
                    Ext.Viewport.removeMenu('right');
                    Ext.Viewport.removeMenu('bottom');
                    Ext.Viewport.removeMenu('top');
                    this.callParent();
                },
    
                getMenuCfg: function (side) {
                    return {
                        items: [{
                            text: 'Settings',
                            iconCls: 'x-fa fa-gear',
                            scope: this,
                            handler: function () {
                                Ext.Viewport.hideMenu(side);
                            }
                        }, {
                            text: 'New Item',
                            iconCls: 'x-fa fa-pencil',
                            scope: this,
                            handler: function () {
                                Ext.Viewport.hideMenu(side);
                            }
                        }, {
                            xtype: 'button',
                            text: 'Star',
                            iconCls: 'x-fa fa-star',
                            scope: this,
                            handler: function () {
                                Ext.Viewport.hideMenu(side);
                            }
                        }]
                    };
                }
            });
    
            var menu = Ext.create('Ext.ActionSheet', {
    
                items: [{
                    text: 'Settings',
                    iconCls: 'x-fa fa-gear',
                    scope: this,
                    handler: function () {
                        Ext.Viewport.hideMenu(side);
                    }
                }, {
                    text: 'New Item',
                    iconCls: 'x-fa fa-pencil',
                    scope: this,
                    handler: function () {
                        Ext.Viewport.hideMenu(side);
                    }
                }, {
                    xtype: 'button',
                    text: 'Star',
                    iconCls: 'x-fa fa-star',
                    scope: this,
                    handler: function () {
                        Ext.Viewport.hideMenu(side);
                    }
                }]
            });
            Ext.application({
                name: 'Fiddle',
    
                launch: function () {
                    
                    Ext.Viewport.setMenu(menu, {
                        side: 'left',
                        // omitting the reveal config defaults the animation to 'cover'
                        reveal: true
                    });
                    Ext.create('KitchenSink.view.Menus', {
                        renderTo: Ext.getBody()
                    });
                    console.log('boo');
                }
               
    
            });
    
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
         <ext:ResourceManager runat="server" id="RMLogin"  ScriptMode="Debug"/>
        </div>
        </form>
    </body>
    </html>

    Best Regards
    Last edited by fabricio.murta; Jun 16, 2021 at 7:48 PM.
  2. #2
    Hello @desarrollodiapli!

    Quote Originally Posted by desarrollodiapli
    or the side menu shown in the ext.net examples page at top, right of ComboBox of EXT.Net versions: https://examples.ext.net/
    Try the same or similar example from Ext.NET 5 examples explorer: https://examples5.ext.net/
    That should allow you a drop-in replacement -- and there are many more examples available to get inspiration from. I can't tell what exactly example you are talking about, you can share the full link for the example so there's no mistakes.

    Quote Originally Posted by desarrollodiapli
    I tried to use the same controls as in the Ext.Net mobile library (there, it was possible to put a side to Menu control), but here it doesn't exists the Side property in Menu control.
    You stated later you are on Ext.NET 5.3.0, so you are using Ext.NET based on the Ext JS Classic framework, so you are not going to get all configs you have in the mobile version (and vice-versa). The two frameworks are simply not identical.

    Quote Originally Posted by desarrollodiapli
    have tried to implement the Ext.ActionSheet control that exists in ExtJs:
    https://docs-devel.sencha.com/extjs/...tionSheet.html, but it seems not possible to load that control with this library.
    That's not going to work, the API artifact you are pointing to is from the Ext JS Modern framework. Ext.NET uses the Classic one. So this class simply does not exist in Ext.NET 5. Well, if you actually try to implement it, it may work, but that's up to you, and I don't think it's coming without some profound adaptations.

    Unfortunately your code snippet relies on the absent feature from Ext.NET, so what I can point is, the need to go a little different way. You possibly want something similar to the "mouse distance sensor" feature highlighted in the desktop example?

    - desktop example -- hover the mouse close to the right hand of the page and a panel will pop up

    If that's so, you can just use the same logic dropping the mouse distance sensor plugin and replacing it with the button click you speak of.

    There's not just one way to accomplish anything in Ext.NET, so here's another one: you can use border layout and collapse a panel containing the menu you want, so you can even have the "hamburguer menu" button to expand it, or simply rely on its expand-on-click behavior. Check this out:

    - Border Layout - Simple in Markup -- the catch here is, you'd set the panel Region="West" as collapsed="true", so it is initially collapsed.

    Even better, a step further (same concept), having a viewport on this border layout, the menu will fit to the screen seamlessly, as highlighted by this example:

    - Viewport - Basic - Build in Markup

    I hope some of these tips lean you towards the right direction. Please review them (and possibly browse a bit examples to see if you can find something even more appealing to the feature you want). Then I believe you'd be able to at least settle in a test case we can actually expand on and help you with the bits left to implement to get the view the way you need.

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    I can't tell what exactly example you are talking about, you can share the full link for the example so there's no mistakes.
    Sorry, I was trying to tell about this button:

    Click image for larger version. 

Name:	extrespuesta2.png 
Views:	10 
Size:	88.2 KB 
ID:	25535

    Click image for larger version. 

Name:	extrespuesta3.png 
Views:	10 
Size:	91.1 KB 
ID:	25536

    I want to create something similar. Also I have attached some images with the last post but I didn't attached them right. I will try with a Viewport with panel regions and a menu. I will post if I can do something with that.
  4. #4
    I have done something like the side menu that I want with the Ext:Viewport regions and Ext:Panel:
    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="PruebaMenuResponsive2.aspx.vb" Inherits="websilon.PruebaMenuResponsive2" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    
    </head>
    <body>
        <form id="form1" runat="server">
       
         <ext:ResourceManager runat="server" id="RMLogin"  ScriptMode="Debug"/>
    
    
        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel ID="PanelSup" runat="server" Region="North">
                    <Items>
                        <ext:Panel ID="Pan1" runat="server">
                            <Items>
                                <ext:Panel ID="Pan11" runat="server" >
                                    <Items>
                                        <ext:Image ID="LogoCh" runat="server" />
                                        <ext:TextField ID="Buscador1" runat="server" />
                                    </Items>
                                    
                                </ext:Panel>
                                <ext:Menu runat="server" ID="Menu2">
                                    <Items>
                                        <ext:MenuItem runat="server" />
                                        <ext:MenuItem runat="server" />
                                        <ext:MenuItem runat="server" />
                                        <ext:MenuItem runat="server" />
                                        <ext:MenuItem runat="server" />
                                    </Items>
                                </ext:Menu>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="Pan2" runat="server" Title="" Layout="HBoxLayout"  >
                            <Items>
                                <ext:Button ID="mnubtn" runat="server" IconUrl="hamb4.png">
                                    <Listeners>
                                        <Click Handler="if(App.MenuLa2t.collapsed==false){App.MenuLa2t.collapse();setTimeout(function(){App.MenuLa2t.setHidden(true);},300);}else{App.MenuLa2t.expand();setTimeout(function(){App.MenuLa2t.setHidden(false);},350);};if(App.MenuLa3t.collapsed==false){App.MenuLa3t.collapse();setTimeout(function(){App.MenuLa3t.setHidden(true);},350);};"></Click>
                                    </Listeners>
                                       
                                </ext:Button>
                                <ext:DisplayField Flex="1" runat="server" />
                                <ext:Button ID="Srch" runat="server" IconUrl="srch.png">
                                    <Listeners>
                                        <Click Handler="if(App.MenuLa3t.collapsed==false){App.MenuLa3t.collapse();setTimeout(function(){App.MenuLa3t.setHidden(true);},300);}else{App.MenuLa3t.expand();setTimeout(function(){App.MenuLa3t.setHidden(false);},350);};if(App.MenuLa2t.collapsed==false){App.MenuLa2t.collapse();setTimeout(function(){App.MenuLa2t.setHidden(true);},350);};"></Click>
                                    </Listeners>
                                       
                                </ext:Button>
                            </Items>
                            </ext:Panel>
                    </Items>
                </ext:Panel>
                 <ext:Panel ID="MenuLa2t" Region="West" CollapseMode="Mini"  Layout="AccordionLayout" Title="West" Width="300" Border="false" Split="true" Collapsible="true" Header="false" runat="server">
                    <Items>
                        <ext:Panel Border="false" Title="Panel 1" Html="Ext.Net 1" runat="server" />
                        <ext:Panel Border="false" Title="Panel 2" Html="Ext.Net 2" runat="server" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="MenuLa3t" Region="East" CollapseMode="Mini"  Layout="AccordionLayout" Title="East" Width="300" Border="false" Split="true" Collapsible="true" Header="false" runat="server">
                    <Items>
                        <ext:Panel Border="false" Title="Panel 1" Html="Ext.Net 1" runat="server" />
                        <ext:Panel Border="false" Title="Panel 2" Html="Ext.Net 2" runat="server" />
                    </Items>
                </ext:Panel>
                <ext:Panel ID="Princ" Region="Center" runat="server">
                    <Items>
    
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
  5. #5
    Hello again, @desarrollodiapli!

    So, just to be sure, the sample provided has all the elements of the menu as wanted, or is there something missing that you couldn't make with that approach?

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    With the sample provided I have replicated the elements I wanted. Maybe if I need more things I will research further.
    Thanks for the help.
  7. #7
    Thanks for the feedback, and glad it helped!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 3
    Last Post: Nov 18, 2014, 9:48 AM
  2. [CLOSED] Show hidden menu panel bug
    By Webezi in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Jul 15, 2014, 9:06 AM
  3. Replies: 1
    Last Post: Aug 16, 2013, 12:07 PM
  4. [CLOSED] Hidden ComboBox in Menu Panel
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 23, 2011, 6:34 AM
  5. Couldn't get my Hidden Value at server-side code.
    By jeeshenlee in forum 1.x Help
    Replies: 1
    Last Post: May 21, 2010, 3:47 AM

Posting Permissions