Nov 18, 2015, 4:22 PM
[CLOSED] DropDownField with TreePanel and MultiCombo strange UI effects when scrolling
Hi, we found a very annoying issue when DropDownField (TreePanel inside) and a MultiCombo on the same page.
Basically, when opening the TreeField AFTER having played with the MultiCombo (scrolling the items inside) the whole page disappears until the drop down is closed.
I've attached a sample ASPX page that reproduces the issue:
1) Open the DropDownField with the TreeField on the RIGHT, ... al looks fine now.
2) Now, Open the MultiCombo field on the LEFT, and SCROLL the items inside (with mouse wheel but it can be done using scrolling too).
3) Come back to the DropDownField on the RIGHT, click on the trigger to open the drop down and... BOOM. Only the TreeField is shown from now on.
Since we use a lot of controls on our form, and considerign that sometimes the users cannot revert the situation (they need to press F5 to refresh the browser completely) it's an urgent issue.
Thank you very much for your help,
Basically, when opening the TreeField AFTER having played with the MultiCombo (scrolling the items inside) the whole page disappears until the drop down is closed.
I've attached a sample ASPX page that reproduces the issue:
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test.aspx.vb" Inherits="WebApplication1.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="Form2" runat="server">
<ext:ResourceManager
ID="ResourceManager2"
runat="server"
Namespace="MyNamespace"
CleanResourceUrl="true"
SourceFormatting="true"
InitScriptMode="Inline"
ScriptMode="Debug" />
<ext:Viewport ID="Viewport1" runat="server" Layout="border">
<Bin>
<ext:TreeStore ID="TreeStore1" runat="server">
<Root>
<ext:Node Expanded="true">
<Children>
<ext:Node Text="app">
<Children>
<ext:Node Text="Application.js" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="button" Expanded="true">
<Children>
<ext:Node Text="Button.js" Leaf="true" />
<ext:Node Text="Cycle.js" Leaf="true" />
<ext:Node Text="Split.js" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="container">
<Children>
<ext:Node Text="ButtonGroup.js" Leaf="true" />
<ext:Node Text="Container.js" Leaf="true" />
<ext:Node Text="Viewport.js" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="core">
<Children>
<ext:Node Text="dom">
<Children>
<ext:Node Text="Element.form.js" Leaf="true" />
<ext:Node Text="Element.static-more.js" Leaf="true" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="dd">
<Children>
<ext:Node Text="DD.js" Leaf="true" />
<ext:Node Text="DDProxy.js" Leaf="true" />
<ext:Node Text="DDTarget.js" Leaf="true" />
<ext:Node Text="DragDrop.js" Leaf="true" />
<ext:Node Text="DragDropManager.js" Leaf="true" />
<ext:Node Text="DragSource.js" Leaf="true" />
<ext:Node Text="DragTracker.js" Leaf="true" />
<ext:Node Text="DragZone.js" Leaf="true" />
<ext:Node Text="DragTarget.js" Leaf="true" />
<ext:Node Text="DragZone.js" Leaf="true" />
<ext:Node Text="Registry.js" Leaf="true" />
<ext:Node Text="ScrollManager.js" Leaf="true" />
<ext:Node Text="StatusProxy.js" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="core">
<Children>
<ext:Node Text="Element.alignment.js" Leaf="true" />
<ext:Node Text="Element.anim.js" Leaf="true" />
<ext:Node Text="Element.dd.js" Leaf="true" />
<ext:Node Text="Element.fx.js" Leaf="true" />
<ext:Node Text="Element.js" Leaf="true" />
<ext:Node Text="Element.position.js" Leaf="true" />
<ext:Node Text="Element.scroll.js" Leaf="true" />
<ext:Node Text="Element.style.js" Leaf="true" />
<ext:Node Text="Element.traversal.js" Leaf="true" />
<ext:Node Text="Helper.js" Leaf="true" />
<ext:Node Text="Query.js" Leaf="true" />
</Children>
</ext:Node>
<ext:Node Text="Action.js" Leaf="true" />
<ext:Node Text="Component.js" Leaf="true" />
<ext:Node Text="Editor.js" Leaf="true" />
<ext:Node Text="Img.js" Leaf="true" />
<ext:Node Text="Layer.js" Leaf="true" />
<ext:Node Text="LoadMask.js" Leaf="true" />
<ext:Node Text="ProgressBar.js" Leaf="true" />
<ext:Node Text="Shadow.js" Leaf="true" />
<ext:Node Text="ShadowPool.js" Leaf="true" />
<ext:Node Text="ZIndexManager.js" Leaf="true" />
</Children>
</ext:Node>
</Root>
</ext:TreeStore>
</Bin>
<Items>
<ext:TabPanel ID="TabPanel1" runat="server" Title="TabPanel" Region="Center">
<Items>
<ext:Panel ID="Panel1" runat="server" Title='Default' Layout="HBoxLayout">
<Items>
<ext:MultiCombo
ID="Status"
runat="server"
FieldLabel="NetMultiCombo"
ForceSelection="true"
Flex="1"
QueryMode="Local">
<Items>
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
<ext:ListItem Text="Item 1" Value="7" />
<ext:ListItem Text="Item 2" Value="8" />
<ext:ListItem Text="Item 3" Value="9" />
<ext:ListItem Text="Item 4" Value="10" />
<ext:ListItem Text="Item 5" Value="11" />
<ext:ListItem Text="Item 1" Value="1" />
<ext:ListItem Text="Item 2" Value="2" />
<ext:ListItem Text="Item 3" Value="3" />
<ext:ListItem Text="Item 4" Value="4" />
<ext:ListItem Text="Item 5" Value="5" />
<ext:ListItem Text="Item 1" Value="7" />
<ext:ListItem Text="Item 2" Value="8" />
<ext:ListItem Text="Item 3" Value="9" />
<ext:ListItem Text="Item 4" Value="10" />
<ext:ListItem Text="Item 5" Value="11" />
</Items>
</ext:MultiCombo>
<ext:DropDownField
ID="Field3"
runat="server"
Editable="false"
Width="300"
Cls="treefield-tree"
FieldLabel="Tree"
Border="false"
EnableTabScroll="true"
Flex="1"
TriggerIcon="SimpleArrowDown">
<Component>
<ext:TreePanel ID="MyTreePanel"
runat="server"
StoreID="TreeStore1"
Height="300"
MaxHeight="400"
MinHeight="200"
Width="300"
RootVisible="false">
</ext:TreePanel>
</Component>
</ext:DropDownField>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>1) Open the DropDownField with the TreeField on the RIGHT, ... al looks fine now.
2) Now, Open the MultiCombo field on the LEFT, and SCROLL the items inside (with mouse wheel but it can be done using scrolling too).
3) Come back to the DropDownField on the RIGHT, click on the trigger to open the drop down and... BOOM. Only the TreeField is shown from now on.
Since we use a lot of controls on our form, and considerign that sometimes the users cannot revert the situation (they need to press F5 to refresh the browser completely) it's an urgent issue.
Thank you very much for your help,
Last edited by Daniil; Nov 23, 2015 at 8:58 AM.
Reason: [CLOSED]
