Jan 04, 2013, 2:31 AM
[CLOSED] UI anomaly related to dropdown fields (IE9, Chrome)
Below you can find the sample and it can be reproduced in IE 9 and Chrome. FireFox is OK.
To reproduce run the sample and resize the browser window to make it smaller, maybe around 300-400 pixels. Now expand one of the last two dropdown fields. The list pushes up the entire viewport and the tab strip, which should be glued to the bottom margin, goes up. I attached a screen shot as well. This didn't use to happen in Ext.Net 1.5!
To reproduce run the sample and resize the browser window to make it smaller, maybe around 300-400 pixels. Now expand one of the last two dropdown fields. The list pushes up the entire viewport and the tab strip, which should be glued to the bottom margin, goes up. I attached a screen shot as well. This didn't use to happen in Ext.Net 1.5!
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>DropDownField Overview - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script>
var getTasks = function (tree) {
var msg = [],
selNodes = tree.getChecked();
msg.push("[");
Ext.each(selNodes, function (node) {
if (msg.length > 1) {
msg.push(",");
}
msg.push(node.data.text);
});
msg.push("]");
return msg.join("");
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="fit">
<Items>
<ext:TabPanel runat="server" TabPosition="Bottom">
<Items>
<ext:FormPanel runat="server" Title="Panel1">
<Items>
<ext:DropDownField ID="Field1" runat="server" TriggerIcon="Search">
<Component>
<ext:Panel ID="Panel2" runat="server" Height="200" Layout="Accordion">
<Items>
<ext:MenuPanel ID="MenuPanel1" runat="server" Title="Group 1" Icon="Group">
<Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" />
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" />
</Items>
<Listeners>
<Click Handler="#{Field1}.setValue('Group 1 - '+menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="MenuPanel2" runat="server" Title="Group 2" Icon="Group">
<Menu ID="Menu2" runat="server">
<Items>
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem5" runat="server" Text="Item 2" />
<ext:MenuItem ID="MenuItem6" runat="server" Text="Item 3" />
</Items>
<Listeners>
<Click Handler="#{Field1}.setValue('Group 2 - '+menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="MenuPanel3" runat="server" Title="Group 3" Icon="Group">
<Menu ID="Menu3" runat="server">
<Items>
<ext:MenuItem ID="MenuItem7" runat="server" Text="Item 1" />
<ext:MenuItem ID="MenuItem8" runat="server" Text="Item 2" />
<ext:MenuItem ID="MenuItem9" runat="server" Text="Item 3" />
</Items>
<Listeners>
<Click Handler="#{Field1}.setValue('Group 3 - '+menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
</Component>
</ext:DropDownField>
<ext:DropDownField
ID="Field2"
runat="server"
TriggerIcon="SimpleRight"
PickerAlign="tl-tr?"
Editable="false"
MatchFieldWidth="false">
<Component>
<ext:Panel ID="Panel3"
runat="server"
Width="400"
Height="90"
Layout="HBoxLayout">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:MenuPanel ID="MenuPanel4"
runat="server"
Border="false"
Flex="1"
SaveSelection="false">
<Menu ID="Menu4" runat="server" ShowSeparator="false">
<Items>
<ext:MenuItem ID="MenuItem10" runat="server" Text="Item 1" Icon="Group" />
<ext:MenuItem ID="MenuItem11" runat="server" Text="Item 2" Icon="Group" />
<ext:MenuItem ID="MenuItem12" runat="server" Text="Item 3" Icon="Group" />
</Items>
<Listeners>
<Click Handler="#{Field2}.setValue(menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="MenuPanel5" runat="server" Border="false" Flex="1" SaveSelection="false">
<Menu ID="Menu5" runat="server" ShowSeparator="false">
<Items>
<ext:MenuItem ID="MenuItem13" runat="server" Text="Item 4" Icon="Group" />
<ext:MenuItem ID="MenuItem14" runat="server" Text="Item 5" Icon="Group" />
<ext:MenuItem ID="MenuItem15" runat="server" Text="Item 6" Icon="Group" />
</Items>
<Listeners>
<Click Handler="#{Field2}.setValue(menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
<ext:MenuPanel ID="MenuPanel6" runat="server" Border="false" Flex="1" SaveSelection="false">
<Menu ID="Menu6" runat="server" ShowSeparator="false">
<Items>
<ext:MenuItem ID="MenuItem16" runat="server" Text="Item 7" Icon="Group" />
<ext:MenuItem ID="MenuItem17" runat="server" Text="Item 8" Icon="Group" />
<ext:MenuItem ID="MenuItem18" runat="server" Text="Item 9" Icon="Group" />
</Items>
<Listeners>
<Click Handler="#{Field2}.setValue(menuItem.text);" />
</Listeners>
</Menu>
</ext:MenuPanel>
</Items>
</ext:Panel>
</Component>
</ext:DropDownField>
<ext:DropDownField
ID="Field3"
runat="server"
Editable="false"
Width="300"
TriggerIcon="SimpleArrowDown">
<Component>
<ext:TreePanel ID="TreePanel1"
runat="server"
Title="My Task List"
Icon="Accept"
Height="300"
Shadow="false"
UseArrows="true"
AutoScroll="true"
Animate="true"
EnableDD="true"
ContainerScroll="true"
RootVisible="false">
<Root>
<ext:Node>
<Children>
<ext:Node Text="To Do" Icon="Folder">
<Children>
<ext:Node Text="Go jogging" Leaf="true" Checked="False" />
<ext:Node Text="Take a nap" Leaf="true" Checked="False" />
<ext:Node Text="Clean house" Leaf="true" Checked="False" />
</Children>
</ext:Node>
<ext:Node Text="Grocery List" Icon="Folder">
<Children>
<ext:Node Text="Bananas" Leaf="true" Checked="False" />
<ext:Node Text="Milk" Leaf="true" Checked="False" />
<ext:Node Text="Cereal" Leaf="true" Checked="False" />
<ext:Node Text="Energy foods" Icon="Folder">
<Children>
<ext:Node Text="Coffee" Leaf="true" Checked="False" />
<ext:Node Text="Red Bull" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>
<ext:Node Text="Kitchen Remodel" Icon="Folder">
<Children>
<ext:Node Text="Finish the budget" Leaf="true" Checked="False" />
<ext:Node Text="Call contractors" Leaf="true" Checked="False" />
<ext:Node Text="Choose design" Leaf="true" Checked="False" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<Buttons>
<ext:Button ID="Button1" runat="server" Text="Close">
<Listeners>
<Click Handler="#{Field3}.collapse();" />
</Listeners>
</ext:Button>
</Buttons>
<Listeners>
<CheckChange Handler="this.dropDownField.setValue(getTasks(this), false);" />
</Listeners>
</ext:TreePanel>
</Component>
<Listeners>
<Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
</Listeners>
</ext:DropDownField>
<ext:DropDownField
ID="DropDownFieldGrid"
runat="server"
Editable="false"
Width="300"
TriggerIcon="SimpleArrowDown">
<Listeners>
<Expand Handler="this.picker.setWidth(500);" />
</Listeners>
<Component>
<ext:GridPanel ID="GridPanel1"
runat="server"
Height="450"
Title="Plants"
Frame="true"
ForceFit="true">
<Store>
<ext:Store ID="Store1" runat="server" GroupField="Light">
<Proxy>
<ext:AjaxProxy Url="../../../GridPanel/Shared/PlantService.asmx/Plants">
<ActionMethods Read="POST" />
<Reader>
<ext:XmlReader Record="Plant" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Common" />
<ext:ModelField Name="Light" />
<ext:ModelField Name="Price" Type="Float" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Common" Direction="ASC" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column ID="Column1" runat="server" Text="Common Name" DataIndex="Common" />
<ext:Column ID="Column2" runat="server" Text="Light" DataIndex="Light" />
<ext:Column ID="Column3"
runat="server"
Text="Price"
DataIndex="Price"
Align="right"
Groupable="false">
<Renderer Format="UsMoney" />
</ext:Column>
<ext:ImageCommandColumn ID="ImageCommandColumn1" runat="server" Align="Center">
<Commands>
<ext:ImageCommand Icon="Accept" CommandName="Pick">
<ToolTip Title="Plant" Text="Click to choose this plant" />
</ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="this.grid.dropDownField.setValue(record.data.Common);" />
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView ID="GridView1" runat="server" LoadMask="true" />
</View>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" />
</SelectionModel>
<Features>
<ext:Grouping ID="Grouping1"
runat="server"
HideGroupedHeader="true"
StartCollapsed="true"
/>
</Features>
</ext:GridPanel>
</Component>
</ext:DropDownField>
</Items>
</ext:FormPanel>
<ext:Panel ID="Panel1" runat="server" Title="Panel2"></ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by Daniil; Jan 11, 2013 at 3:43 AM.
Reason: [CLOSED]
