[CLOSED] Dynamic desktop shortcuts

  1. #1

    [CLOSED] Dynamic desktop shortcuts

    Hi,
    due to the fact that when adding too many shortcuts in the desktop module using the sortindex they overlap (see attached screenshot) Attachment 24772

    We have decided to set them by X,Y values. The following code is a sample of a desktop module, where the position is fixed (X,Y). I would like to ask how can I access the X and Y values and from where, in order to dynamically set it depending on the width and height of the window. (explained in the code as well).


    <ext:DesktopModuleProxy runat="server">
        <Module ModuleID="grid-win">
            <Shortcut Name="Grid Window" IconCls="x-grid-shortcut" X=1200 Y=150/> 
    <%--Here or from a function in the Desktop module I will need to replace X and Y with a dynamic value of my choice--%>
    
            <Launcher Text="Grid Window" Icon="Table" />
            <Window>
                <ext:Window runat="server"
                    Icon="Table" 
                    Width="740" 
                    Height="480"                
                    Layout="Fit"
                    Title="Grid Window">
                    <TopBar>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button runat="server" Text="Add Something" Icon="Add" ToolTip="Add a new row">
                                </ext:Button>
    
                                <ext:ToolbarSeparator runat="server" />
    
                                <ext:Button runat="server" Text="Options" Icon="Plugin">
                                </ext:Button>
    
                                <ext:ToolbarSeparator runat="server" />
    
                                <ext:Button runat="server" Text="Remove Something" ToolTip="Remove the selected item" Icon="Decline">
                                    <QTipCfg Text="Remove the selected user" />
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
    
                    <Items>
                        <ext:GridPanel runat="server"
                            Border="false">
                            <Store>
                                <ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
                                    <Model>
                                        <ext:Model runat="server">
                                            <Fields>
                                                <ext:ModelField Name="Company" />
                                                <ext:ModelField Name="Price" Type="Float" />
                                                <ext:ModelField Name="Change" Type="Float" />
                                                <ext:ModelField Name="PctChange" Type="Float" />
                                            </Fields>
                                        </ext:Model>
                                    </Model>
                                    <Reader>
                                        <ext:ArrayReader />
                                    </Reader>
                                </ext:Store>
                            </Store>
    
                            <ColumnModel>
                                <Columns>
                                    <ext:RowNumbererColumn runat="server" />
                                    <ext:Column runat="server" Text="Company" Flex="1" Sortable="true" DataIndex="Company" />
                                    <ext:Column runat="server" Text="Price" Width="70" Sortable="true" DataIndex="Price">
                                        <Renderer Format="UsMoney" />
                                    </ext:Column>
                                    <ext:Column runat="server" Text="Change" Width="70" Sortable="true" DataIndex="Change" />
                                    <ext:Column runat="server" Text="% Change" Width="70" Sortable="true" DataIndex="PctChange" />
                                </Columns>
                            </ColumnModel>
                        </ext:GridPanel>
                    </Items>
                </ext:Window>
            </Window>
        </Module>
    </ext:DesktopModuleProxy>
    <%@ Page Language="C#" %>
    
    <%@ Register Src="modules/AccordionWindow.ascx" TagPrefix="mod" TagName="AccordionWindow" %>
    <%@ Register Src="modules/GridWindow.ascx" TagPrefix="mod" TagName="GridWindow" %>
    <%@ Register Src="modules/SystemStatus.ascx" TagPrefix="mod" TagName="SystemStatus" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                // dynamic module loading via DesktopModuleProxy
                this.LoadControl("modules/WhatsNew.ascx");
            }
        }
    
        protected void Logout_Click(object sender, DirectEventArgs e)
        {
            // Logout from Authenticated Session
            this.Response.Redirect("Default.aspx");
        }
    
        [DirectMethod(ShowMask = true)]
        public void CreateWindow()
        {
            Desktop.GetInstance().CreateWindow(new Window
            {
                Title = "New window",
                Width = 300,
                Height = 300,
                CloseAction = CloseAction.Destroy,
                Html="The window is created"
            });
        }
    
        [DirectMethod(ShowMask=true)]
        public void AddNewModule()
        {
            Desktop.GetInstance().RemoveModule("add-module");
            DesktopModuleProxy control = Ext.Net.Utilities.ControlUtils.FindControl<Ext.Net.DesktopModuleProxy>(this.LoadControl("modules/TabWindow.ascx"));
            control.RegisterModule();
        }
    
        [DirectMethod(ShowMask = true)]
        public void AddAnotherModule()
        {
            Desktop.GetInstance().RemoveModule("add1-module");
            DesktopModule m = new DesktopModule
            {
                ModuleID = "dyn-mod",
                Shortcut = new DesktopShortcut
                {
                    Name = "Dynamic Module"
                },
    
                Launcher = new Ext.Net.MenuItem
                {
                    Text = "Dynamic module"
                },
    
                Window =
                {
                    new Window
                    {
                        Title = "Dynamic Window",
                        Width = 300,
                        Height = 300,
                        DefaultRenderTo = Ext.Net.DefaultRenderTo.Form,
                        Icon = Icon.ApplicationAdd
                    }
                },
    
                AutoRun = true
            };
    
            Desktop1.AddModule(m);
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
    
        <link href="resources/desktop.css" rel="stylesheet" />
    
        <script>
            var tile = function () {
                Ext.net.Desktop.desktop.tileWindows();
            };
    
            var cascade = function () {
                Ext.net.Desktop.desktop.cascadeWindows();
            };
    
            var initSlidePanel = function () {
                this.setHeight(Ext.net.Desktop.desktop.body.getHeight());
    
                if (!this.windowListen) {
                    this.windowListen = true;
                    this.show();
    
                    this.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0]);
                    Ext.on("resize", initSlidePanel, this);
                }
            };
        </script>
    </head>
    <body>
            <ext:ResourceManager runat="server">
                <Listeners>
                    <WindowResize Handler="Ext.net.Bus.publish('App.Desktop.ready');" Buffer="500" />
                </Listeners>
            </ext:ResourceManager>
    
            <ext:Desktop ID="Desktop1" runat="server">
                <Modules>
                    <ext:DesktopModule ModuleID="Hello" AutoRun="true">
                        <Window>
                            <ext:Window runat="server"
                                Plain="true"
                                Padding="10"
                                Width="150"
                                Height="100"
                                Title="Greeting"
                                CloseAction="Destroy"
                                Maximizable="false"
                                Minimizable="false">
                                <Content>
                                    Welcome to Ext.Net desktop!
                                </Content>
                            </ext:Window>
                        </Window>
                    </ext:DesktopModule>
    
                    <ext:DesktopModule ModuleID="notepad">
                        <Shortcut Name="Notepad" IconCls="x-notepad-shortcut"  SortIndex="2" />
                        <Launcher Text="Notepad" Icon="ApplicationForm" />
                        <Window>
                            <ext:Window runat="server"
                                Title="Notepad"
                                Width="750"
                                Height="400"
                                Icon="ApplicationForm"
                                AnimCollapse="false"
                                Border="false"
                                HideMode="Offsets"
                                Layout="FitLayout"
                                CloseAction="Destroy">
                                <Items>
                                    <ext:HtmlEditor
                                        runat="server"
                                        Text="Some <b>rich</b> <font color='red'>text</font> goes <u>here</u><br>Give it a try!" />
                                </Items>
                            </ext:Window>
                        </Window>
                    </ext:DesktopModule>
    
                    <ext:DesktopModule ModuleID="create-module">
                        <Shortcut Name="Create window" Handler="function () {#{DirectMethods}.CreateWindow();}" SortIndex="3">
                        </Shortcut>
                    </ext:DesktopModule>
    
                    <ext:DesktopModule ModuleID="add-module">
                        <Shortcut Name="Render dynamic module" Handler="function () {#{DirectMethods}.AddNewModule();}" X="200" Y="100" TextCls="x-long-label">
                        </Shortcut>
                    </ext:DesktopModule>
    
                    <ext:DesktopModule ModuleID="add1-module">
                        <Shortcut Name="Render another module" Handler="function () {#{DirectMethods}.AddAnotherModule();}" X="200" Y="300" TextCls="x-long-label">
                        </Shortcut>
                    </ext:DesktopModule>
                </Modules>
    
                <DesktopConfig Wallpaper="resources/wallpapers/blue.jpg" ShortcutDragSelector="true">
                    <ShortcutDefaults IconCls="x-default-shortcut" />
                    <ContextMenu>
                        <ext:Menu runat="server">
                            <Items>
                                <ext:MenuItem runat="server" Text="Change Settings" />
                                <ext:MenuSeparator runat="server" />
                                <ext:MenuItem runat="server" Text="Tile" Handler="tile" Icon="ApplicationTileVertical" />
                                <ext:MenuItem runat="server" Text="Cascade" Handler="cascade" Icon="ApplicationCascade" />
                            </Items>
                        </ext:Menu>
                    </ContextMenu>
    
                    <Content>
                       <ext:Image runat="server" ImageUrl="resources/logo.png" StyleSpec="position:absolute;top: 50%;left: 50%;width: 77px; height: 78px;margin-top: -39px; margin-left: -39px;"/>
                       <ext:Image runat="server" ImageUrl="resources/powered.png" StyleSpec="position:absolute;right:10px;bottom:20px;width:300px;height:39px;"/>
                       <ext:DisplayField runat="server" Text="You can place controls to desktop" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;left: 50%; bottom: 100px;margin-left: -180px;"/>
                       <ext:DisplayField runat="server" Text="Move mouse to the right edge -->" FieldStyle="color:white;font-size:24px;" StyleSpec="position:absolute;right:50px;top:50px;"/>
    
                       <ext:Toolbar runat="server" Width="545" Floating="true" ClassicButtonStyle="true" Flat="true" Border="false" Shadow="false">
                            <Defaults>
                                <ext:Parameter Name="IconAlign" Value="top" />
                                <ext:Parameter Name="Width" Value="105" />
                                <ext:Parameter Name="Icon" Value="resources/cmd.png" />
                                <ext:Parameter Name="Scale" Value="large" />
                                <ext:Parameter Name="Handler" Value="function () {Ext.Msg.alert('Launch', this.text);}" Mode="Raw" />
                            </Defaults>
                            <Items>
                                <ext:Button runat="server" Text="Word" />
                                <ext:Button runat="server" Text="Excel" />
                                <ext:Button runat="server" Text="Notepad" />
                                <ext:Button runat="server" Text="Paint" />
                                <ext:Button runat="server" Text="Explorer" />
                            </Items>
                            <MessageBusListeners>
                                <ext:MessageBusListener Name="App.Desktop.ready" Handler="this.el.anchorTo(Ext.net.Desktop.desktop.body, 'c-b', [0, -50]);" />
                            </MessageBusListeners>
                        </ext:Toolbar>
                    </Content>
                </DesktopConfig>
    
                <StartMenu Title="Ext.Net Desktop" Icon="Application" Height="300">
                    <ToolConfig>
                        <ext:Toolbar 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 TrayWidth="120">
                    <QuickStart>
                        <ext:Toolbar runat="server" Width="80">
                            <Items>
                                <ext:Button runat="server" Handler="tile" Icon="ApplicationTileVertical" OverflowText="Tile windows">
                                    <QTipCfg Text="Tile windows" />
                                </ext:Button>
    
                                <ext:Button runat="server" Handler="cascade" Icon="ApplicationCascade" OverflowText="Cascade windows">
                                    <QTipCfg Text="Cascade windows" />
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </QuickStart>
    
                    <Tray>
                        <ext:Toolbar runat="server">
                            <Items>
                                <ext:Button ID="LangButton" runat="server" Text="EN" Cls="x-bold-text" MenuAlign="br-tr" ArrowVisible="false">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:CheckMenuItem runat="server" Group="lang" Text="English" Checked="true" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('EN');}" />
                                                <ext:CheckMenuItem runat="server" Group="lang" Text="French" CheckHandler="function (item, checked) {checked && #{LangButton}.setText('FR');}" />
                                                <ext:MenuSeparator runat="server" />
                                                <ext:MenuItem runat="server" Text="Show the Language Bar" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                                <ext:ToolbarFill runat="server" />
                            </Items>
                        </ext:Toolbar>
                    </Tray>
                </TaskBar>
                <Listeners>
                    <Ready BroadcastOnBus="App.Desktop.ready" />
                </Listeners>
            </ext:Desktop>
    
            <ext:Panel runat="server" Title="Slide panel" Frame="true" Width="250" Layout="AccordionLayout" Floating="true" Shadow="false" Hidden="true">
                <Items>
                    <ext:Panel runat="server" Title="Section 1" Icon="User" />
                    <ext:Panel runat="server" Title="Section 2" Icon="UserB" />
                    <ext:Panel runat="server" Title="Section 3" Icon="UserB" />
                    <ext:Panel runat="server" Title="Section 4" Icon="UserB" />
                    <ext:Panel runat="server" Title="Section 5" Icon="UserB" />
                </Items>
                <MessageBusListeners>
                    <ext:MessageBusListener Name="App.Desktop.ready" Fn="initSlidePanel" />
                </MessageBusListeners>
                <Plugins>
                    <ext:MouseDistanceSensor runat="server" Opacity="false" Threshold="25">
                        <Listeners>
                            <Near Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tr-tr', [0, 0], true);" />
                            <Far Handler="this.component.el.alignTo(Ext.net.Desktop.desktop.body, 'tl-tr', [0, 0], true);" />
                        </Listeners>
                    </ext:MouseDistanceSensor>
                </Plugins>
            </ext:Panel>
    
            <%--Modules from User controls--%>
            <mod:AccordionWindow runat="server" />
            <mod:GridWindow runat="server" />
            <mod:SystemStatus runat="server" />
    </body>
    </html>
    Last edited by fabricio.murta; Nov 11, 2016 at 4:53 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello @stefanos!

    Hello! Your sample does not run in our side. So, I will provide you directions on one of the approaches you could use:

    1. bind the shortcut to a variable

    X=<%# winX %> Y=<%# winY %> AutoDataBind="true"
    2. define it in the control's scope and bind value during page load:

    public int winX;
    public int winY;
        
    public void Page_Load(object sender, EventArgs e)
    {
        winX = 400;
        winY = 200;
    }
    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello again @stefanos!

    It's been some time already and you didn't provide feedback on this thread. Did the directions above help you at all?
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Desktop Shortcuts
    By fabiomarcoseuzebio in forum 1.x Help
    Replies: 1
    Last Post: Sep 06, 2012, 2:23 PM
  2. [CLOSED] Center desktop shortcuts on desktop
    By CarWise in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 15, 2011, 6:49 AM
  3. Ext.Net Webdesktop customize shortcuts
    By blue in forum 1.x Help
    Replies: 3
    Last Post: Apr 05, 2011, 1:12 PM
  4. Adding shortcuts on desktop
    By joao.msdn in forum 1.x Help
    Replies: 1
    Last Post: Apr 13, 2010, 9:06 AM
  5. desktop dynamic
    By lhalfon in forum 1.x Help
    Replies: 0
    Last Post: Mar 03, 2010, 8:02 AM

Tags for this Thread

Posting Permissions