[CLOSED] Badge Issue on Tab

Page 2 of 2 FirstFirst 12
  1. #11
    Really -- I just picked up a tab example and added the tab config from my earlier post.

    Here you go. As I said in the post the key is rendertobody=false. And you can see why I ended up overriding the css and adding margins. Not overly sure what other workarounds there are for this.

    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Show and Hide Tabs - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Show and Hide Tabs</h1>
            
            <ext:TabPanel ID="TabPanel1" runat="server" Width="800" Height="300">
    
                <Items>
    
                    <ext:Panel ID="Tab1" Title="Tab1" runat="server" Closable="false" CloseAction="Hide" Html="Tab1">
    
                        <TabConfig runat="server">
                            <Plugins>
                                <ext:Badge HideEmpty="false" RenderToBody="false" runat="server" id="test" Text="1"></ext:Badge>
                            </Plugins>
                        </TabConfig>
    
                    </ext:Panel>
    
                    <ext:Panel ID="Tab2" Title="Tab2" runat="server" Closable="true" CloseAction="Hide" Html="Tab2">
                        <Listeners>
                            <Close Handler="#{ShowTab2}.setDisabled(false);" />
                        </Listeners>
                    </ext:Panel>
                    <ext:Panel ID="Tab3" Title="Tab3" runat="server" Closable="true" CloseAction="Hide" Html="Tab3">
                        <Listeners>
                            <Close Handler="#{ShowTab3}.setDisabled(false);" />
                        </Listeners>
                    </ext:Panel>
                    
                    <ext:Panel ID="Tab4" Title="Tab4" runat="server" Closable="true" CloseAction="Hide" Html="Tab4">
                        <Listeners>
                            <Close Handler="#{ShowTab4}.setDisabled(false);" />
                        </Listeners>
                    </ext:Panel>
                    
                    <ext:Panel ID="Tab5" Title="Tab5 - Close Event" runat="server" Closable="true" CloseAction="Destroy">
                        <Content>
                            Tab5 with CloseAction='Close' (after closing the tab can't be reshow)
                        </Content>
                        <Listeners>
                            <Close Handler="alert('Tab5 has been closed');" />
                        </Listeners>
                    </ext:Panel>                
                </Items>
    
                <Bin>
                    <ext:Panel ID="Tab6" Title="Tab6" runat="server" Closable="true" CloseAction="Hide" Hidden="true" Html="PreHidden Tab6">
                        <Listeners>
                            <Close Handler="#{ShowTab6}.setDisabled(false);" />
                        </Listeners>
                    </ext:Panel>
                </Bin>
                
                <BottomBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Button ID="CloseTab1" runat="server" Text="Close Tab1">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.closeTab(#{Tab1});this.setDisabled(true);#{ShowTab1}.setDisabled(false);" />
                                </Listeners>
                            </ext:Button>
                            
                            <ext:ToolbarFill />
                            <ext:Button ID="ShowTab1" runat="server" Text="Show Tab1" Disabled="true">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.addTab(#{Tab1});this.setDisabled(true);#{CloseTab1}.setDisabled(false);" />
                                </Listeners>
                            </ext:Button>
                            
                            <ext:Button ID="ShowTab2" runat="server" Text="Show Tab2" Disabled="true">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.addTab(#{Tab2});this.setDisabled(true);" />
                                </Listeners>
                            </ext:Button>
                            
                            <ext:Button ID="ShowTab3" runat="server" Text="Show Tab3 at begin" Disabled="true">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.addTab(#{Tab3}, 0);this.setDisabled(true);" />
                                </Listeners>
                            </ext:Button>
                            
                            <ext:Button ID="ShowTab4" runat="server" Text="Show Tab4 without activate" Disabled="true">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.addTab(#{Tab4}, false);this.setDisabled(true);" />
                                </Listeners>
                            </ext:Button>
                            
                            <ext:Button ID="ShowTab6" runat="server" Text="Show Tab6">
                                <Listeners>
                                    <Click Handler="#{TabPanel1}.addTab(#{TabPanel1}.bin[0]);this.setDisabled(true);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:TabPanel>
        </form>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    I could not reproduce that with a code snippet that you provided. A full test case is appreciated.
    Last edited by CanopiusApplications; May 21, 2014 at 3:27 PM.
  2. #12
    Thank you.

    Well, I doesn't look we are to fix this case with RenderToBody="false". In this case a badge is being rendered to a tabs strip and there is no enough room for that. I would say it is up to a developer, under his responsibility.

    RenderToBody is true by default and it is a preferred option. Could you, please, clarify why you use RenderToBody="false"? You might already mentioned that in the thread, but I re-read the thread quickly and I didn't find. Sorry, if I missed.
  3. #13
    Quote Originally Posted by Daniil View Post
    RenderToBody is true by default and it is a preferred option. Could you, please, clarify why you use RenderToBody="false"? You might already mentioned that in the thread, but I re-read the thread quickly and I didn't find. Sorry, if I missed.
    Sorry, you probably use it because of this rule:
    If Badge's component is located inside hidden area (or will be located) then it is required to set RenderToBody="false" for Badge because Badge doesn't track visibility of parent elements
    here:
    https://examples2.ext.net/#/MessageB...den_Container/

    It is hard (if possible) to fix it in a generic manner. So, your CSS solution is good.
  4. #14
    Yup as I suspected that it was probably not possible to fix this in this case.
    I use rendertobody=false because I have tabs within tabs so the rule about it not tracking visibility of the parent causes issues.

    Suppose the only other fix is to get the badge to track visibility of parent so rendertobody can be true -- not sure if that is worth doing.

    Either way I am happy enough with my fix.


    Quote Originally Posted by Daniil View Post
    Sorry, you probably use it because of this rule:

    here:
    https://examples2.ext.net/#/MessageB...den_Container/

    It is hard (if possible) to fix it in a generic manner. So, your CSS solution is good.
  5. #15
    Quote Originally Posted by CanopiusApplications View Post
    Suppose the only other fix is to get the badge to track visibility of parent so rendertobody can be true -- not sure if that is worth doing.
    Thank you for the suggestion. We might review that functionality at some point.
Page 2 of 2 FirstFirst 12

Similar Threads

  1. Badge on DataView Items
    By inteligencija in forum 2.x Help
    Replies: 0
    Last Post: May 12, 2014, 7:16 AM
  2. TabPanel : Badge and UI
    By brunweb in forum 2.x Help
    Replies: 2
    Last Post: Mar 14, 2014, 11:07 AM
  3. [CLOSED] Setting Badge from server
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 23, 2014, 2:52 AM
  4. Replies: 3
    Last Post: Dec 05, 2012, 1:38 PM
  5. [CLOSED] Pecilluar issue in the DropDown, UI Issue
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 22, 2012, 12:02 PM

Posting Permissions