What's New?

[CLOSED] Is this possible ? Desktop + panel --> Hide right side

  1. #1
    Dec 29, 2011, 12:16 PM

    [CLOSED] Is this possible ? Desktop + panel --> Hide right side

    Hide..

    Trying to find a solution to combine viewport possibility with desktop. I would like to show/hide a specifice panel 'docked' on the right part of the desktop so that only the left border of the panel is still visible (like collapsing it). I've used your online desktop example to create some visuals :) (please check. Makes this understandible)

    I've tried to add a viewport to the desktop content with only the east section, but with no result..

    Regards,

    Martin
    Attached Thumbnails Click image for larger version.  Name: wish.jpg  Views: 96  Size: 13.6 KB  ID: 3632  
    Last edited by Daniil; Jan 04, 2012 at 5:56 PM. Reason: [CLOSED]
  2. #2
    Dec 29, 2011, 12:40 PM
    Hi,

    To clarify - do you mean BorderLayout under "viewport"?
  3. #3
    Dec 29, 2011, 12:52 PM
    Quote Originally Posted by Daniil View Post
    Hi,

    To clarify - do you mean BorderLayout under "viewport"?
    True :) Sorry for the wrong description..

    But I only want the slidein/slideout effect for 1 panel (on top of current desktop)

    Martin
  4. #4
    Dec 29, 2011, 1:20 PM
    Thanks for the clarification.

    Hope this example helps.

    Example
    <%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var alignPanels = function () {
            Panel1.getEl().alignTo(Ext.getBody(), "tr", [-505, 5], false)
        };

        var onRight = function (e, toolEl, panel) {
            var el = panel.getEl();
            toolEl.hide();
            panel.tools.left.show();
            el.alignTo(Ext.getBody(), "tr", [-30, 5], {
                callback : function () {
                    el.setWidth(25);
                }
            });
        };

        var onLeft = function (e, toolEl, panel) {
            var el = panel.getEl();
            toolEl.hide();
            panel.tools.right.show();
            el.setWidth(500);
            el.alignTo(Ext.getBody(), "tr", [-505, 5], true);
        };
    </script>

    <style type="text/css">
        .desktopEl {
            position: absolute !important;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server">
            <Listeners>
                <DocumentReady Handler="alignPanels();" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Desktop ID="Desktop1" runat="server" BackgroundColor="black">
            <Modules>
                <ext:DesktopModule ModuleID="DesktopModule1" WindowID="DesktopWindow1" />
            </Modules>
            <Shortcuts>
                <ext:DesktopShortcut ModuleID="DesktopModule1" Text="Shortcut" />
            </Shortcuts>
            <StartMenu>
                <Items>
                    <ext:MenuItem Text="DesktopWindow1">
                        <Listeners>
                            <Click Handler="DesktopWindow1.show();" />
                        </Listeners>
                    </ext:MenuItem>
                </Items>
            </StartMenu>
            <Content>
                <ext:Panel 
                    ID="Panel1"
                    runat="server" 
                    Cls="desktopEl" 
                    Height="400" 
                    Width="500">
                    <Tools>
                        <ext:Tool Type="Right" Fn="onRight" />
                        <ext:Tool Type="Left" Fn="onLeft" Hidden="true" />
                    </Tools>   
                </ext:Panel>
            </Content>
        </ext:Desktop>
        <ext:DesktopWindow ID="DesktopWindow1" runat="server" Title="DesktopWindow" />
    </form>
</body>
</html>
  5. #5
    Dec 29, 2011, 1:59 PM
    Great Daniil...works like a charm !

    One small problem. I need to show a title 'nieuws' ... when 'hiding' the panel. The first 'ni' are still in sight. that is nog happening when checking the borderlayout of your desktop example (the 'east' title) ..

    Any idea how to hide the title when 'hided'

    (check the attachment)

    Regards..Martin
    Attached Thumbnails Click image for larger version.  Name: exampleHding.png  Views: 95  Size: 45.2 KB  ID: 3633  
  6. #6
    Dec 29, 2011, 2:04 PM
    Please try:
    panel.header.child('span').hide();
    Or you can "remove" title using the setTitle method:
    http://docs.sencha.com/ext-js/3-4/#!...ethod-setTitle

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. How to hide start button in the Desktop example ?
    By venuc in forum 1.x Help
    Replies: 1
    Last Post: Oct 22, 2012, 10:52 AM
  3. How to hide DesktopShortcut dymanically in Ext.Net Desktop?
    By archana in forum 1.x Help
    Replies: 1
    Last Post: Jun 04, 2012, 1:14 PM
  4. How to hide grid panel rows based on condition on client side at the time of displaying?
    By i3class in forum 1.x Help
    Replies: 0
    Last Post: May 01, 2012, 9:43 AM
  5. [CLOSED] Desktop: Hide taskbar
    By CSG in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 02, 2009, 8:10 AM

Posting Permissions