What's New?

[CLOSED] [#35] Override BorderLayout Behavior to Float Rather than Expand and icon click.

Page 1 of 2 12 LastLast
  1. #1
    Oct 04, 2012, 3:17 PM

    [CLOSED] [#35] Override BorderLayout Behavior to Float Rather than Expand and icon click.

    Is there a way to do the opposite of this thread?

    I would like to try to have a panel only be floatable when the title or expand icon is selected. Or can the Expand icon be removed so the user can only click on the title to float the panel.
    Last edited by Baidaly; Mar 08, 2013 at 2:08 AM. Reason: [CLOSED]
  2. #2
    Oct 04, 2012, 6:04 PM
    Hi Chris,

    I think the HideCollapseTool option is a solution.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel 
                runat="server" 
                Region="West" 
                Width="200" 
                Collapsed="true"
                HideCollapseTool="true" />
            <ext:Panel runat="server" Region="Center" />
        </Items>
    </ext:Viewport>
</body>
</html>
  3. #3
    Oct 04, 2012, 6:23 PM
    Not sure why my eyes skipped over that attribute. This is perfect, so now the user can only click on the header and the panel will only float and not expand.

    Ok. I looked really hard and couldn't find the following. What function do I call from javascript to tell the panel to float via code?
  4. #4
    Oct 05, 2012, 4:46 AM
    I can't see such method in API. Looking at the sources I found the floatCollapsedPanel method.
    App.Panel1.floatCollapsedPanel();
    It appears to be exactly what you need.
  5. #5
    Oct 05, 2012, 1:12 PM
    Quote Originally Posted by Daniil View Post
    I can't see such method in API. Looking at the sources I found the floatCollapsedPanel method.
    App.Panel1.floatCollapsedPanel();
    It appears to be exactly what you need.
    Perfect. Do you think Sencha should expose this through their API?
  6. #6
    Oct 05, 2012, 1:24 PM
    I can't see any reason at the first to do not expose. Though, maybe, it missed something.

    But I am sure this or another method to float a Component should exist in the API.
  7. #7
    Oct 05, 2012, 1:41 PM
    I am investigating a small hiccup. I have made my East Panel a float only panel by providing the attributes:

       Collapsed="true"
   HideCollapseTool="true"
    A click on the title header causes the panel to float (Yea!).

    I added a link in the center panel that when clicked calls the east panel to float.

        function boxLabelClick(e) {
       #{EastTermsOfUse}.floatCollapsedPanel();
    }
    Clicking on the link causes the panel to float (Yea!).

    Here is the issue after several combined clicks on the title header and/or the link the East panel begins to float from the north instead of the east. I am trying to see if I can make it repeatable. It occurs after many (10+) float occurances.
  8. #8
    Oct 05, 2012, 1:51 PM
    Maybe this is the reason why it is not in the API:)

    We would do our best to investigate a sample, if provide.
  9. #9
    Oct 05, 2012, 2:15 PM
    Here is a simple example:

    You can perform the following and everything works:
    • Press the button to float panel;
    • Press the button again to collapse the floated panel;
    • Press the button again to float the panel;
    • Press the button again to collapse the floated panel;

    • Press the East Panel header to float panel;
    • Press the East Panel header again to collapse the floated panel;
    • Press the East Panel header again to float the panel;
    • Press the East Panel header again to collapse the floated panel;


    To cause the issue perform the following:
    • Press the East Panel header to float panel;
    • Quickly press the button to collapse the floated panel before it auto closes;
    • Press the button again to float the panel (Button it drops down from the top instead of the east);


    All future floats of the East Panel will always float from the top now.

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Call Panel Float from Button</title>
</head>
<body>
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Window ID="Window1" runat="server" Title="Float Panel Example" Icon="Application"
        Width="300" Height="200" Plain="true" Border="false" Collapsible="true" BodyBorder="0"
        AnimateTarget="Button1" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="EastPanel" runat="server" Region="East" Title="Term of Use" Icon="BookOpen"
                BodyPadding="5" Flex="2" Collapsible="true" Collapsed="true" HideCollapseTool="true"
                Html="Please read the terms.">
            </ext:Panel>
            <ext:Panel ID="CenterPanel" runat="server" Region="Center" Layout="AutoLayout" BodyPadding="5">
                <Items>
                    <ext:Button runat="server" Text="Float East" OnClientClick="#{EastPanel}.floatCollapsedPanel();" />
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
</body>
</html>
  10. #10
    Oct 08, 2012, 7:45 AM
    Hi Chris,

    Reproduced and reported to Sencha.
    http://www.sencha.com/forum/showthread.php?245265

    I am not sure they will consider it a bug, because it is private method. If so, then, hopefully, we will suggest something, at least.
Page 1 of 2 12 LastLast

Similar Threads

  1. BorderLayout expand && HBoxLayoutConfig in MVC example
    By threewonders in forum 1.x Help
    Replies: 2
    Last Post: Apr 12, 2012, 7:35 AM
  2. BorderLayout expand && HBoxLayoutConfig
    By threewonders in forum 1.x Help
    Replies: 2
    Last Post: Apr 04, 2012, 4:32 PM
  3. Viewport: panel expand on collapsed bar click, same as expand icon click...
    By deljo in forum 1.x Help
    Replies: 1
    Last Post: Mar 13, 2012, 8:37 AM
  4. [CLOSED] Override BorderLayout "Floatable" Behavior to Expand Rather than Float
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 21, 2011, 6:15 PM
  5. BorderLayout Expand from code behind
    By rajputamit in forum 1.x Help
    Replies: 1
    Last Post: Oct 29, 2010, 7:32 AM

Posting Permissions