What's New?

CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden

  1. #1
    Aug 21, 2009, 1:43 PM

    CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden

    If I display a tabpanel containing a checkboxgroup via a click handler and tabpanel.addTab, the contents of the checkboxgroup do not appear:

    <ext:BorderLayout ID="BorderLayout1" runat="server">
                        <West Collapsible="True" Split="True">
                            <ext:MenuPanel ID="MenuPanel1" runat="server" Height="300" Title="Menu" Width="185">
                                <Menu ID="mnuOptions" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="mnuPriorityOneEntry" runat="server" Text="New Priority One Incident" Icon="AwardStarBronze2">
                                            <Listeners>
                                                <Click Handler="#{TabPanel1}.addTab(#{tbPriorityOne});" />
                                            </Listeners>
                                        </ext:MenuItem>
                                    </Items>
                                </Menu>
                            </ext:MenuPanel>
                        </West>
                        <Center>
                            <ext:Panel ID="pnl1" runat="server">
                                <Body>
                                    <ext:FitLayout ID="fitlayout1" runat="server">
                                        <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0">
                                            <Tabs>
                                                <ext:Tab ID="tbPriorityOne" runat="server" Title="Priority One Incident" Closable="true" Hidden="True">
                                                    <Body>
                                                        <ext:FormLayout ID="FormLayout1" runat="server" LabelWidth="110">
                                                            <ext:Anchor Horizontal="100%">
                                                                <ext:CheckboxGroup 
                                                                    ID="CheckboxGroup1" 
                                                                    runat="server" 
                                                                    ColumnsNumber="3"
                                                                    FieldLabel="General/Criminal">
                                                                    <Items>
                                                                        <ext:Checkbox runat="server" ID="cbdeath" DataIndex="DeathOfClient" HideLabel="False" AutoShow="False" BoxLabel="Death of a Client"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox1" DataIndex="SuicideAttempt" HideLabel="False" AutoShow="False" BoxLabel="Suicide Attempt"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox10" DataIndex="MajorPropertyDamage" HideLabel="True" AutoShow="False" BoxLabel="Major Property Damage"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox11" DataIndex="LawEnforcementInvolvement" HideLabel="True" AutoShow="False" BoxLabel="Law Enforcement Involvement"></ext:Checkbox>
                                                                    </Items>
                                                                </ext:CheckboxGroup>
                                                            </ext:Anchor>
                                                            <ext:Anchor Horizontal="100%">
                                                                <ext:CheckboxGroup 
                                                                    ID="CheckboxGroup2" 
                                                                    runat="server" 
                                                                    ColumnsNumber="3"
                                                                    FieldLabel="Medical">
                                                                    <Items>
                                                                        <ext:Checkbox runat="server" ID="Checkbox2" DataIndex="NonRoutineMedicalTreatment" HideLabel="True" BoxLabel="Non-Routine Medical Treatment"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox3" Enabled="false" DataIndex="Hospitalization" HideLabel="True" AutoShow="False" BoxLabel="Hospitalization"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox4" DataIndex="SeriousInjuryClient" HideLabel="True" AutoShow="False" BoxLabel="Client"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox5" DataIndex="SeriousInjuryStaff" HideLabel="True" AutoShow="False" BoxLabel="Staff"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox7" DataIndex="MedicalIncident" HideLabel="True" BoxLabel="Medical Incident"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox6" Enabled="false" DataIndex="MedicationMisadministration" HideLabel="True" AutoShow="False" BoxLabel="Misadministration"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox8" Enabled="false" DataIndex="MedicationOmission" HideLabel="True" AutoShow="False" BoxLabel="Omission"></ext:Checkbox>
                                                                        <ext:Checkbox runat="server" ID="Checkbox9" Enabled="false" DataIndex="MedicationAdverseReaction" HideLabel="True" AutoShow="False" BoxLabel="Adverse Reaction"></ext:Checkbox>
                                                                    </Items>
                                                                </ext:CheckboxGroup>
                                                            </ext:Anchor>
                                                        </ext:FormLayout>
                                                    </Body>
                                                </ext:Tab>
                                            </Tabs>
                                        </ext:TabPanel>
                                    </ext:FitLayout>
                                </Body>
                            </ext:Panel>
                        </Center>
                    </ext:BorderLayout>
    If I remove the "Hidden=true" attribute from the tab, the checkboxgroup appears as expected. Same visual result in FF and IE8.
  2. #2
    Aug 21, 2009, 2:05 PM

    RE: CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden

    Hi,

    Try to call doLayout after unhide the tab
    #{tbPriorityOne}.doLayout();
  3. #3
    Aug 21, 2009, 2:10 PM

    RE: CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden

    That works...

    Two questions:

    1. Is that Expected Behavior?

    2. Would the same fix be required for other container objects inside an initially-hidden tabpanel?
  4. #4
    Aug 21, 2009, 2:24 PM

    RE: CheckboxGroup in Tabpanel doesn't render if TabPanel is initially hidden

    Hi,

    It can be if controls render to the hidden area because hidden area has no size (zero size) therefore child controls can't determine own size. Calling doLayout forcing rerendering (relayout)


    doLayout can be called for control which has layout only

Similar Threads

  1. Set value in textfield on Tab to value from Tabpanel hidden value
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Apr 26, 2011, 6:59 PM
  2. Panel initially hidden doesn't show toolbar when shown
    By paul-2011 in forum 1.x Help
    Replies: 8
    Last Post: Apr 14, 2011, 4:20 PM
  3. [CLOSED] [1.0] GridPanel Scroll bar doesn't render initially when the gird is inside Card
    By chafikb in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: May 25, 2010, 12:00 PM
  4. [CLOSED] [1.0] Initially Hidden fields in CompositeField do not render properly on becoming visible
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 19, 2010, 5:00 AM
  5. Tabpanel - get value from hidden in tab
    By Tbaseflug in forum 1.x Help
    Replies: 2
    Last Post: Sep 02, 2009, 3:51 PM

Posting Permissions