5 Attachment(s)
[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
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 Attachment 3486
if I click the button to show the hidden panel, it shows but the layout is weird. It looks like this.Attachment 3487
Once you resize the browser's, the panel shows correctly. It looks like this. Attachment 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 Attachment 3490.
Once you resize the browser's again, the white space disappeared and the layout looks correct. it looks like this Attachment 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
