hide start button on desktop Ext.NET 5

  1. #1

    hide start button on desktop Ext.NET 5

    Greeting,

    I've create desktop.aspx like below :
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="desktop.aspx.cs" Inherits="WebApplication1.desktop" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var curTheme = Ext.Net.ResourceManager.GetInstance(HttpContext.Current);
    
                switch (curTheme.Theme)
                {
                    case Ext.Net.Theme.Triton:
                        this.toolbarMnu.Height = 50;
                        break;
                    case Ext.Net.Theme.Classic:
                        this.toolbarMnu.Height = 35;
                        break;
                    case Ext.Net.Theme.CrispTouch:
                    case Ext.Net.Theme.NeptuneTouch:
                        Desktop1.TaskBar.QuickStartWidth = 84;
                        Desktop1.TaskBar.TrayWidth = 127;
                        break;
                    case Ext.Net.Theme.Crisp:
                    case Ext.Net.Theme.Neptune:
                        Desktop1.TaskBar.QuickStartWidth = 64;
                        Desktop1.TaskBar.TrayWidth = 114;
                        break;
                }
            }
        }
    
        protected void Logout_Click(object sender, DirectEventArgs e)
        {
            
            this.Response.Redirect("startup.aspx");
        }
    
        [DirectMethod(ShowMask = true)]
        public void createwinappme(string idmn, string wtitle, string waction, int wheight, int wwidth)
        {
            Desktop.GetInstance().CreateWindow(new Window
            {
                ID = idmn,
                Height = wheight,
                Width = wwidth,
                Maximizable = false,
                Resizable = false,
                Title = wtitle,
                Icon = Icon.TableGear,
                CloseAction = CloseAction.Destroy,
                Modal = true,
                Layout = "FitLayout",
                Loader = new ComponentLoader
                {
                    Url= waction,
                    Mode = LoadMode.Frame,
                    LoadMask =
                    {
                        ShowMask = true
                    }
                }
    
            });
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Aplikasi Aset (BMD) ... </title>
    
        <script type="text/javascript" src="~/Content/CommonUtil.js"></script>
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <link href="~/resources/desktop.css" rel="stylesheet" />
        <style type="text/css">
            /* wraps over the x-fa CSS class to match the reference from the Triton/Graphite themes */
            .x-fa {
              display: inline-block;
              font: 18px;
              font-size: inherit;
              text-rendering: auto;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: inherit;
            }
        </style>
    
        <script>
            var tile = function () {
                Ext.net.Desktop.desktop.tileWindows();
            };
    
            var cascade = function () {
                Ext.net.Desktop.desktop.cascadeWindows();
            };
    
        </script>
    </head>
    <body>
            <ext:ResourceManager runat="server" Theme="Classic" ></ext:ResourceManager>
    
            <ext:Desktop ID="Desktop1" runat="server" >
    
                <DesktopConfig Wallpaper="~/resources/wallpapers/desk.jpg" ShortcutDragSelector="true" >
                    <Content>
    
                    </Content>
                </DesktopConfig>
    
                <StartMenu Title="Ext.Net Desktop" Icon="Application" Height="200" Hidden="true" >
                    <ToolConfig>
                        <ext:Toolbar ID="StartMenuToolbar" runat="server" Width="100">
                            <Items>
                                <ext:Button runat="server" Text="Settings" Icon="Cog" />
                                <ext:Button runat="server" Text="Logout" Icon="Key">
                                    <DirectEvents>
                                        <Click OnEvent="Logout_Click">
                                            <EventMask ShowMask="true" Msg="Good Bye..." MinDelay="1000" />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </ToolConfig>
                </StartMenu>
    
                <TaskBar QuickStartWidth="0" TrayWidth="50" Dock="Top" >
                    <QuickStart>
                        <ext:Toolbar ID="MnToolbar" runat="server">
    
                        </ext:Toolbar>
                    </QuickStart>
                    <Tray>
    
                    </Tray>
                    
                </TaskBar>
            </ext:Desktop>
    </body>
    </html>
    I want to hide start button using -- > Handler="Ext.get('ux-taskbar-start').addClass('x-hide-display');"

    and I put <Listeners> </Listener> :
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="desktop.aspx.cs" Inherits="WebApplication1.desktop" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                var curTheme = Ext.Net.ResourceManager.GetInstance(HttpContext.Current);
    
                switch (curTheme.Theme)
                {
                    case Ext.Net.Theme.Triton:
                        this.toolbarMnu.Height = 50;
                        break;
                    case Ext.Net.Theme.Classic:
                        this.toolbarMnu.Height = 35;
                        break;
                    case Ext.Net.Theme.CrispTouch:
                    case Ext.Net.Theme.NeptuneTouch:
                        Desktop1.TaskBar.QuickStartWidth = 84;
                        Desktop1.TaskBar.TrayWidth = 127;
                        break;
                    case Ext.Net.Theme.Crisp:
                    case Ext.Net.Theme.Neptune:
                        Desktop1.TaskBar.QuickStartWidth = 64;
                        Desktop1.TaskBar.TrayWidth = 114;
                        break;
                }
            }
        }
    
        protected void Logout_Click(object sender, DirectEventArgs e)
        {
            
            this.Response.Redirect("startup.aspx");
        }
    
        [DirectMethod(ShowMask = true)]
        public void createwinappme(string idmn, string wtitle, string waction, int wheight, int wwidth)
        {
            Desktop.GetInstance().CreateWindow(new Window
            {
                ID = idmn,
                Height = wheight,
                Width = wwidth,
                Maximizable = false,
                Resizable = false,
                Title = wtitle,
                Icon = Icon.TableGear,
                CloseAction = CloseAction.Destroy,
                Modal = true,
                Layout = "FitLayout",
                Loader = new ComponentLoader
                {
                    Url= waction,
                    Mode = LoadMode.Frame,
                    LoadMask =
                    {
                        ShowMask = true
                    }
                }
    
            });
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Aplikasi Aset (BMD) ... </title>
    
        <script type="text/javascript" src="~/Content/CommonUtil.js"></script>
        <link href="~/Content/font-awesome.css" rel="stylesheet" />
        <link href="~/resources/desktop.css" rel="stylesheet" />
        <style type="text/css">
            /* wraps over the x-fa CSS class to match the reference from the Triton/Graphite themes */
            .x-fa {
              display: inline-block;
              font: 18px;
              font-size: inherit;
              text-rendering: auto;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: inherit;
            }
        </style>
    
        <script>
            var tile = function () {
                Ext.net.Desktop.desktop.tileWindows();
            };
    
            var cascade = function () {
                Ext.net.Desktop.desktop.cascadeWindows();
            };
    
        </script>
    </head>
    <body>
            <ext:ResourceManager runat="server" Theme="Classic" ></ext:ResourceManager>
    
            <ext:Desktop ID="Desktop1" runat="server" >
    
                <DesktopConfig Wallpaper="~/resources/wallpapers/desk.jpg" ShortcutDragSelector="true" >
                    <Content>
    
                    </Content>
                </DesktopConfig>
    
                <StartMenu Title="Ext.Net Desktop" Icon="Application" Height="200" Hidden="true" >
                    <ToolConfig>
                        <ext:Toolbar ID="StartMenuToolbar" runat="server" Width="100">
                            <Items>
                                <ext:Button runat="server" Text="Settings" Icon="Cog" />
                                <ext:Button runat="server" Text="Logout" Icon="Key">
                                    <DirectEvents>
                                        <Click OnEvent="Logout_Click">
                                            <EventMask ShowMask="true" Msg="Good Bye..." MinDelay="1000" />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </ToolConfig>
                </StartMenu>
    
                <TaskBar QuickStartWidth="0" TrayWidth="50" Dock="Top" >
                    <QuickStart>
                        <ext:Toolbar ID="MnToolbar" runat="server">
    
                        </ext:Toolbar>
                    </QuickStart>
                    <Tray>
    
                    </Tray>
                    
                </TaskBar>
                <Listeners>
                    <Ready Handler="Ext.get('ux-taskbar-start').addClass('x-hide-display');" />
                </Listeners>
            </ext:Desktop>
    </body>
    </html>

    but why become blank like picture below
    Click image for larger version. 

Name:	blank_desktop.png 
Views:	101 
Size:	13.4 KB 
ID:	25362

    Are there any solution ... ?? Thank you ...
  2. #2
    Hello @muhammadantoniussony!

    Disabling or enabling the listener you added:

    <Listeners>
        <Ready Handler="Ext.get('ux-taskbar-start').addClass('x-hide-display');" />
    </Listeners>
    I get the same result: the desktop showing the start menu:

    Click image for larger version. 

Name:	62924-desktopShown.png 
Views:	64 
Size:	6.8 KB 
ID:	25363

    But indeed, there's a script error because there's no component named (or with ID as) ux-taskbar-start. Where have you inferred that command from? An example in Examples Explorer or another forum thread?

    One way to get the button from the taskbar to hide it from desktop would be to use instead the Ext.select() method. The button takes the ux-start-button CSS class and you should be able to get its representation in the DOM (element in generated HTML page) via Ext.select('.ux-start-button').

    Hoping it will be the only component using this CSS class in the page, you can then hide it with:

    <Listeners>
        <Ready Handler="Ext.select('.ux-start-button').elements[0].style.display = 'none';" />
    </Listeners>
    Fortunately this Ready event fires early and the space taken by the start button is also deallocated if you hide it.

    Another (simpler) solution to hide the start menu would be to just add this CSS class extending its ux-start-button CSS class:

    .ux-start-button {
        display: none
    }
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you Fabricio,

    I get that code from https://forums.ext.net/showthread.ph...710#post285710

    After you answer my thread, I use this :
        <style type="text/css">
            .ux-start-button {
                display: none
            }
        </style>
    and It work
    Click image for larger version. 

Name:	hide_start_button.jpg 
Views:	98 
Size:	51.4 KB 
ID:	25364

    Once again, thank you

    And you can close this thread ...
    Last edited by muhammadantoniussony; Jun 13, 2020 at 1:57 PM. Reason: add

Similar Threads

  1. How to hide start button in Ext.Net Desktop?
    By archana in forum 1.x Help
    Replies: 1
    Last Post: Oct 22, 2012, 10:53 AM
  2. Replies: 1
    Last Post: Oct 22, 2012, 10:52 AM
  3. Desktop Start Button
    By Dominik in forum 1.x Help
    Replies: 3
    Last Post: Oct 22, 2012, 10:51 AM
  4. Replies: 1
    Last Post: Jun 04, 2012, 1:14 PM
  5. How to start with EXT.NET.UX
    By nailuj-nallim in forum 1.x Help
    Replies: 1
    Last Post: Jun 11, 2011, 8:41 PM

Posting Permissions