[CLOSED] How to add taskbar on top of my desktop?

[metci]

Hi,

I have a Ext.Net Desktop which has accordion menu on left and start bar at the bottom.I want to add a new taskbar on at the top of desktop which will have logged user name,icon ... Is it possible or not.Which component do you suggest me?

My window screenshoot is attached

[Daniil]

Hi @metci,

There is a Toolbar added to a Desktop's Content.
https://examples2.ext.net/#/Desktop/...ction/Overview

It is aligned to the bottom, please see its MessageBusListener. I think it is possible to align as you need.

[metci]

Hi @Daniil,

Is toolbar you said start bar which contains clock etc on https://examples2.ext.net/#/Desktop/...tion/Overview?



I dont understand MessageBusListener you said.Please explain what it is.

Thnaks.

[fabricio.murta]

Hello, you would want a toolbar more or less like this (some trimming will be needed to fill the desktop up to the accordion you shown on your screenshot).

<ext:Toolbar runat="server" Floating="true">
    <Items>
        <ext:ToolbarFill runat="server" />
        <ext:Container runat="server" Layout="TableLayout">
            <Items>
                <ext:Label runat="server" Text="User: " Padding="4" />
                <ext:Label runat="server" Text="Johnny Deere" />
                <ext:ToolbarFill runat="server" Width="20" />
                <ext:Image runat="server" ImageUrl="resources/user48x48.png" Width="48" Height="48" />
            </Items>
        </ext:Container>
        <ext:ToolbarFill runat="server" Width="10" />
        <ext:ToolbarSeparator runat="server" Height="23" />
        <ext:ToolbarFill runat="server" Width="10" />
        <ext:Button runat="server" Text="Profile" Icon="CogEdit" />
        <ext:Button runat="server" Text="Logout" Icon="DoorOut" />
    </Items>
    <MessageBusListeners>
        <ext:MessageBusListener Name="App.Desktop.ready" Handler="this.el.anchorTo(Ext.net.Desktop.desktop.body, 'tr-tr', [0, 0]);" />
    </MessageBusListeners>
</ext:Toolbar>

You will see in the source code a toolbar very similar to this one in the desktop example linked on previous posts. It is inside the <content> tag of the <DesktopConfig> tag, around line 200 of Desktop.aspx.

as for the MessageBusListener, it is triggered every time the Ready event happens on the Desktop. Scroll down on the source of Desktop.aspx, right before it closes the Desktop tag, you can see:

<Listeners>
    <Ready BroadcastOnBus="App.Desktop.ready" />
</Listeners>

This Listener is broadcasting the "App.Desktop.ready" message on the "bus" every time the desktop loads or reloads. So anything expecting this message with:

<MessageBusListeners>
    <ext:MessageBusListener Name="App.Desktop.ready" />
</MessageBusListeners>

Will run its respective Handler or Function once the desktop is loaded. This guarantees the desktop has already adjusted to the size of the window before calling this.el.anchorTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50]); to anchor the toolbar to the specified (c-b or center-bottom) position on the screen.

I hope this clarifies your questions and also gives you a good insight on how to build your desired view.