[CLOSED] Side Menu hidden

Threaded View

Previous Post Previous Post   Next Post Next Post
  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:	68 
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.

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