PDA

View Full Version : [CLOSED] UI anomaly related to dropdown fields (IE9, Chrome)



bogc
Jan 04, 2013, 2:31 AM
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!

5355



<%@ 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.Commo n);" />
</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>

Daniil
Jan 04, 2013, 8:19 AM
Hi @bogc,

Please try to set up

ComponentRenderTo="FormPanel1"
for the DropDownFields.

It appears to help.

bogc
Jan 04, 2013, 5:44 PM
Yes, that helped, thank you!

I just want to make a couple of notes, the ID used to set the ComponentRenderTo has to match exactly the JavaScript id value that was assigned to the container panel. When the dropdown field is expanded the code performs an Ext.getCmp(<componentRenderToValue>) to get the container and if it doesn't find it, it blows up.

Also, even if I add AutoScroll="true" to the form panel, the vertical scroll bar doesn't appear when the dropdown is expanded and the component doesn't fit entirely in the panel. Not too sure there is something can be done about this... Just an update, I added StyleSpec="overflow: auto;" and that brings the scrollbar. I noticed that AutoScroll="true" adds "overflow: auto;" to the body of the form panel and the list is rendered as a sibling of the body element. This is why it didn't work.

Daniil
Jan 07, 2013, 10:56 AM
ComponentRenderTo is the renderTo config option for the DropDownField's Component.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.AbstractComponent-cfg-renderTo

It doesn't support a component to be set up as a value.

We have committed the change to SVN. Now it is possible to set up:

ComponentRenderTo="App.FormPanel1.body"

So, you will be able to remove StyleSpec and set up AutoScroll="true" back. I checked it up with FireFox, works fine.