What's New?

[CLOSED] strange badge behavior on button in tabpanel

  1. #1
    Jun 27, 2015, 2:39 PM

    [CLOSED] strange badge behavior on button in tabpanel

    Hello

    Is this a bug or just a not correctly initialized badge on my part? The badge stays for the second tab... I would think that it vanishes like the rest of the buttons.

    I found something about badges and tabpanels but I am not sure, if it is the same (link).

    thanks for a nudge in the right direction.

    best regards.


    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<script runat="server">
    public static string TEST_HTML_1 = @"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed egestas gravida nibh, quis porttitor felis  
                    venenatis id.";

    public static string TEST_HTML_2 = @"<b>This tab is scrollable.</b><br /><br /> 
                    Aenean sit";
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Plain TabPanel - Ext.NET Examples</title>
    <link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" MarginSpec="0 0 10 0">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
        </LayoutConfig>
        <Items>
            <ext:TabPanel 
                runat="server" 
                Width="400"
                Height="295"
                MarginSpec="0 0 20 0">
                <Defaults>
                    <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                    <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Active Tab" 
                        Html="<%# TEST_HTML_1  %>" 
                        ButtonAlign="Left"
                        AutoDataBind="true">
                            <Buttons>
                                <ext:Button runat="server" Text="Test">
                                    <Plugins>
                                        <ext:Badge runat="server" Text="99" UI="Info"></ext:Badge>
                                    </Plugins>
                                </ext:Button>
                            </Buttons>
                        </ext:Panel>

                    <ext:Panel
                        runat="server" 
                        Title="Inactive Tab" 
                        Html="<%# TEST_HTML_2  %>" 
                        ButtonAlignment="Left"
                        AutoDataBind="true" />

                    <ext:Panel runat="server" Title="Disabled Tab" Disabled="true" />
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Last edited by Dimitris; Jun 29, 2015 at 1:18 PM. Reason: [CLOSED]
  2. #2
    Jun 28, 2015, 11:17 AM
    Hello,

    Answer is here: https://examples3.ext.net/#/MessageB...den_Container/

    The following sample demonstrates:

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

<script runat="server">
    public static string TEST_HTML_1 = @"Lorem ipsum dolor sit amet.";

    public static string TEST_HTML_2 = @"<b>This tab is scrollable.</b>";
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" MarginSpec="0 0 10 0">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
        </LayoutConfig>
        <Items>
            <ext:TabPanel 
                runat="server" 
                Width="400"
                Height="295"
                MarginSpec="0 0 20 0">
                <Defaults>
                    <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                    <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Active Tab" 
                        Html="<%# TEST_HTML_1  %>" 
                        ButtonAlign="Left"
                        AutoDataBind="true">
                            <Buttons>
                                <ext:Button runat="server" Text="Test">
                                    <Plugins>
                                        <ext:Badge 
                                            runat="server" 
                                            Text="99" 
                                            UI="Info" 
                                            AlignmentSpec="r-r" 
                                            OffsetX="10" 
                                            RenderToBody="false"></ext:Badge>
                                    </Plugins>
                                </ext:Button>                                    
                            </Buttons>                                    
                        </ext:Panel>

                    <ext:Panel
                        runat="server" 
                        Title="Inactive Tab" 
                        Html="<%# TEST_HTML_2  %>" 
                        ButtonAlignment="Left"
                        AutoDataBind="true" />

                    <ext:Panel runat="server" Title="Disabled Tab" Disabled="true" />
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>
    Hope it helps.
    Last edited by Dimitris; Jun 28, 2015 at 11:19 AM.
  3. #3
    Jun 29, 2015, 5:10 AM
    Hello Dimitris,

    Thank you, with your example it doesn't show on the second tab anymore. But I have noticed you changed the position of the badge because else it is cut off. I can't have both can I? ;)

    Best regards!

    PS: I arranged it now with X and Y Offsets - not so nice like before anymore but better....
    Last edited by tMp; Jun 29, 2015 at 5:16 AM.
  4. #4
    Jun 29, 2015, 8:28 AM
    I can't have both can I? ;)
    You may as well define a Toolbar instead of the Buttons shortcut and control its height:

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

<script runat="server">
    public static string TEST_HTML_1 = @"Lorem ipsum dolor sit amet.";

    public static string TEST_HTML_2 = @"<b>This tab is scrollable.";
</script>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:Viewport runat="server" MarginSpec="0 0 10 0">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Center" Pack="Center" />
        </LayoutConfig>
        <Items>
            <ext:TabPanel 
                runat="server" 
                Width="400"
                Height="295"
                MarginSpec="0 0 20 0">
                <Defaults>
                    <ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
                    <ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
                </Defaults>
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Active Tab" 
                        Html="<%# TEST_HTML_1  %>" 
                        ButtonAlign="Left"
                        AutoDataBind="true">
                            <BottomBar>
                                <ext:Toolbar runat="server" Height="60px">
                                    <Items>
                                        <ext:Button runat="server" Text="Test">
                                            <Plugins>
                                                <ext:Badge 
                                                    runat="server" 
                                                    Text="99" 
                                                    UI="Info" 
                                                    RenderToBody="false"></ext:Badge>
                                            </Plugins>
                                        </ext:Button>                                    
                                    </Items>
                                </ext:Toolbar>
                            </BottomBar>
                        </ext:Panel>

                    <ext:Panel
                        runat="server" 
                        Title="Inactive Tab" 
                        Html="<%# TEST_HTML_2  %>" 
                        ButtonAlignment="Left"
                        AutoDataBind="true" />

                    <ext:Panel runat="server" Title="Disabled Tab" Disabled="true" />
                </Items>
            </ext:TabPanel>
        </Items>
    </ext:Viewport>
</body>
</html>
    :)

    Hope it helps.
    Last edited by Dimitris; Jun 29, 2015 at 8:30 AM.
  5. #5
    Jun 29, 2015, 9:08 AM
    Very nice - cute trick! I have to remember that one. The examples aren't always the most flexible way :)

    Thanks a lot!

    cheers.

Similar Threads

  1. TabPanel : Badge and UI
    By brunweb in forum 2.x Help
    Replies: 2
    Last Post: Mar 14, 2014, 11:07 AM
  2. Strange behavior after nuget
    By bovo13 in forum 2.x Help
    Replies: 7
    Last Post: Oct 17, 2013, 1:21 PM
  3. Strange Button DirectEvent Behavior
    By Doug.Morrow in forum 2.x Help
    Replies: 2
    Last Post: Sep 03, 2012, 6:53 PM
  4. Strange behavior of buttons and itextsharp
    By bovo13 in forum 1.x Help
    Replies: 3
    Last Post: Dec 22, 2011, 6:53 AM
  5. Strange behavior of hidden compositeControl
    By Zdenek in forum 1.x Help
    Replies: 1
    Last Post: Dec 13, 2011, 5:31 AM

Posting Permissions