[CLOSED] VBoxLayout layout does not refresh the layout automatically

  1. #1

    [CLOSED] VBoxLayout layout does not refresh the layout automatically

    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 Click image for larger version. 

Name:	1.png 
Views:	88 
Size:	47.0 KB 
ID:	3486
    if I click the button to show the hidden panel, it shows but the layout is weird. It looks like this.Click image for larger version. 

Name:	2.png 
Views:	99 
Size:	46.4 KB 
ID:	3487
    Once you resize the browser's, the panel shows correctly. It looks like this. Click image for larger version. 

Name:	3.png 
Views:	76 
Size:	54.9 KB 
ID:	3489.
    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 Click image for larger version. 

Name:	4.png 
Views:	90 
Size:	47.1 KB 
ID:	3490.
    Once you resize the browser's again, the white space disappeared and the layout looks correct. it looks like this Click image for larger version. 

Name:	5.png 
Views:	71 
Size:	44.0 KB 
ID:	3491
    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
    Last edited by Daniil; Nov 23, 2011 at 1:58 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Call the doLayout method after hiding/showing an item.

    Client side
    Viewport1.doLayout();
    Server side
    Viewport1.DoLayout();
  3. #3
    It works great. Thank you very much.

Similar Threads

  1. [CLOSED] layout issue when using RowLayout within column layout
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 11, 2012, 2:40 PM
  2. [CLOSED] Layout help
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Sep 29, 2011, 8:22 AM
  3. [CLOSED] vbox layout inside column layout
    By craig2005 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 04, 2011, 2:44 PM
  4. [CLOSED] Basic Layout question for Layout Fit / AutoHeight
    By macap in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 07, 2010, 11:57 AM
  5. [CLOSED] Page layout using layout controls.
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 23, 2010, 12:08 PM

Posting Permissions