[CLOSED] VBoxLayout layout does not refresh the layout automatically

[leon_tang]

Hi:

I got the annoying problem about the VBoxLayout.
I have a viewport which is set the layout value to "VBoxLayout"
In the viewport, I have three controls, one user control, one panel and one gridpanel
Here is the code

<ext:Viewport ID="Viewport1" runat="server" Layout="VBoxLayout">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch" />
        </LayoutConfig>
        <Items>
            <Workware:PlanToolbar ID="PlanToolbar" runat="server" PlanningMode="Core" InputMode="Direct" OutputMode="WorkOut" />

            <ext:Panel ID="PanelHeadline" runat="server"  Frame="true" Padding="0"
                Border="false" BaseCls="x-box"  Layout="HBoxLayout" HideMode="Display" Hidden="True">
                <Content>
                     <ext:GridPanel ID="GridPanelHeadline" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="StorePlanHeadline" runat="server" SerializationMode="Complex">
                                <Reader>
                                    <ext:JsonReader />
                                </Reader>
                            </ext:Store>
                        </Store>
                        <View>
                            <ext:GridView AutoFill="true">
                            </ext:GridView>
                        </View>
                        <ColumnModel>
                            <Columns>
                            </Columns>
                        </ColumnModel>
                       </ext:GridPanel>
                    </Content>
             </ext:Panel>      
              
            <ext:GridPanel ID="GridPanelPlanDetail" runat="server" StoreID="StorePlanDetails"
                Flex="1" ColumnLines="true" ClicksToEdit="1" Collapsible="false" Layout="Fit"
                StripeRows="true" EnableColumnHide="false" Border="false">
               
                <ColumnModel>
                    <Columns>
                        <ext:Column Css="border: 0;" Width="26" Header="" Editable="false" Locked="true"
                            Fixed="true" ColumnID="Drill" Sortable="false" MenuDisabled="true">
                            <Renderer Fn="corePlanning.ShowDrillDownButton" />
                        </ext:Column>
                        <ext:Column ColumnID="Item" Header="<%$Resources: Strings, ItemWithSetDefault%>"
                            DataIndex="Label" Locked="true" Sortable="False" MenuDisabled="true" Width="300">
                        </ext:Column>
                        <ext:Column Css="border: 0;" Header="<%$Resources: Strings, Unit%>" Editable="true"
                            Locked="true" DataIndex="ColumnUnit" Fixed="true" ColumnID="ColumnUnit" Sortable="false"
                            MenuDisabled="true">
                            <Renderer Fn="corePlanning.RenderUnitValue" />
                        </ext:Column>
                        <ext:Column ColumnID="ExtraColumn" Header="" DataIndex="ExtraColumn" Locked="true"
                            Sortable="False" MenuDisabled="true" Width="100" Hidden="true">
                            <Editor>
                                <ext:SpinnerField ID="SpinnerFieldExtra" AllowDecimals="true" MinValue="0" runat="server"
                                    IncrementValue="1" AllowBlank="false">
                                </ext:SpinnerField>
                            </Editor>
                            <Renderer Fn="corePlanning.FormatValue" />
                        </ext:Column>
                        <ext:Column Header="Section" Hideable="false" DataIndex="Level" Hidden="true">
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true"
                        MoveEditorOnEnter="true">
                    </ext:RowSelectionModel>
                </SelectionModel>
                <View>
                    <Workware:LockingGroupingGridView ID="LockingGroupingGridView1" runat="server" SyncHeights="true">
                        <%--ShowGroupName="false" HideGroupedColumn="true" StartCollapsed="true" GroupTextTpl="{[values.rs[0].data.Section]}"--%>
                    </Workware:LockingGroupingGridView>
                </View>
            </ext:GridPanel>
        </Items>
    </ext:Viewport>

The problem is hide and show the panel. As you can see in the code, when page first time load, the panel is hide and the layout is correct.
it looks like this
if I click the button to show the hidden panel, it shows but the layout is weird. It looks like this.
Once you resize the browser's, the panel shows correctly. It looks like this. .
That's the problem 1.

The second is when I clicked another button to hide the panel, the panel is hidden but the white space is still on the page. it looks like this .
Once you resize the browser's again, the white space disappeared and the layout looks correct. it looks like this
That's the problem 2.

It looks like the VBoxLayout didn't automatically refresh the layout if we hide or show the panel. Any idea to solve this issue please?
Thank you

[Daniil]

Hi,

Call the doLayout method after hiding/showing an item.

Client side

Viewport1.doLayout();

Server side

Viewport1.DoLayout();

[leon_tang]

It works great. Thank you very much.