Feb 09, 2015, 12:25 PM
[CLOSED] Panel with HBoxLayout inside a TabPanel and scrolling position lost
Hello,
I've found annoying issue that involves "HBoxLayout" panels used as "Tab" pages in a TabPanel.
Basically the current scrolling position get lost as soon as:
- We change the panel Header text with another text
- If you switch to another panel and go back to the previous tab
Please note that the issue is specific to the usage of the HBox layout on the panel, with another layout it works fine.
Test code (extends your sample at https://examples3.ext.net/#/Kitchen_...asic_TabPanel/)
I've found annoying issue that involves "HBoxLayout" panels used as "Tab" pages in a TabPanel.
Basically the current scrolling position get lost as soon as:
- We change the panel Header text with another text
- If you switch to another panel and go back to the previous tab
Please note that the issue is specific to the usage of the HBox layout on the panel, with another layout it works fine.
Test code (extends your sample at https://examples3.ext.net/#/Kitchen_...asic_TabPanel/)
<ext:ResourceManager runat="server" ScriptMode="Debug" IDMode="Predictable" />
<ext:Viewport runat="server" MarginSpec="0 0 10 0">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Center" Pack="Center" />
</LayoutConfig>
<Items>
<ext:TabPanel
ID="TabPanel"
runat="server"
Width="400"
Height="295"
MarginSpec="0 0 20 0">
<Defaults>
<ext:Parameter Name="bodyPadding" Value="10" Mode="Raw" />
<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
</Defaults>
<Items>
<ext:Panel
runat="server"
Title="Active Tab"
Html="<%# TEST_HTML_1 %>"
AutoDataBind="true" />
<ext:Panel
runat="server"
Title="Inactive Tab"
Html="<%# TEST_HTML_2 %>"
AutoDataBind="true" />
<ext:Panel ID="Panel1"
runat="server"
Title="HBox Tab">
<LayoutConfig><ext:HBoxLayoutConfig /></LayoutConfig>
<Items>
<ext:Panel runat="server" AutoScroll="true" Flex="1">
<Content><%=TEST_HTML_2 %></Content>
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Label runat="server" Text="Title"></ext:Label>
<ext:ToolbarFill runat="server" />
<ext:Button runat="server" Text="Button" />
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
<ext:Panel ID="Panel2" runat="server" AutoScroll="true" Flex="1">
<Content><%=TEST_HTML_2 %></Content>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Title="Disabled Tab" Disabled="true" />
</Items>
<BottomBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="SetTitle" Handler="debugger;#{TabPanel}.getActiveTab().setTitle(Ext.Date.format(new Date(), 'd/M/y H:i:s'));" />
</Items>
</ext:Toolbar>
</BottomBar>
</ext:TabPanel>
</Items>
</ext:Viewport>
Last edited by Daniil; Feb 17, 2015 at 12:56 PM.
Reason: [CLOSED]