PDA

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



cwolcott
Oct 04, 2012, 3:17 PM
Is there a way to do the opposite of this thread (http://forums.ext.net/showthread.php?15912-CLOSED-Override-BorderLayout-quot-Floatable-quot-Behavior-to-Expand-Rather-than-Float)?

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.

Daniil
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>

cwolcott
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?

Daniil
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.

cwolcott
Oct 05, 2012, 1:12 PM
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?

Daniil
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.

cwolcott
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.

Daniil
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.

cwolcott
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>

Daniil
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.

Daniil
Oct 08, 2012, 10:10 AM
Sencha opened a bug ticket. We will monitor.

cwolcott
Oct 09, 2012, 4:12 PM
Looks like they fixed it in 4.1.3 Sprint 1. Not a big deal to wait until Ext.NET starts referencing ExtJS 4.1.3.

Daniil
Oct 09, 2012, 4:47 PM
Thank you for the update.

Yes, there are already many bug fixes in 4.1.3. I think we will update to this version when it will be released.

Baidaly
Nov 17, 2012, 12:32 AM
Opened an Issue to track this defect, see

https://github.com/extnet/Ext.NET/issues/35

cwolcott
Mar 08, 2013, 12:48 AM
I have tested against the latest release and it has been fixed. Please close the thread.

Baidaly
Mar 08, 2013, 2:08 AM
Thank you for the update!