PDA

View Full Version : [CLOSED] DropDown Field Collapsing in Grid Panel Header Item



BATCCA
Jun 21, 2013, 8:31 PM
There seems to be a bug when using a DropDownField as a HeaderItem in a GridPanel Column.
Currently I'm trying to create a date range filter but whenever I select a date the DropDown collapses.

I have set the property allowBlur to true, but this doesnt prevent it from collapsing

I have setup an example that demostrates the issue
This code was working in Ext2.0


<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="Ext.Net" %>
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AppLogViewer</title>
<script runat="server">

</script>
<script type="text/javascript">

var KeyUpEvent = function (sender, e) {
if (e.getKey() != 13) return false;
}

</script>

</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Frame="false" Layout="FitLayout" Margins="0 2 0 2">
<Items>
<ext:GridPanel runat="server" Header="false" Border="false" ID="gridLog">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button Text="Buscar" runat="server" Icon="Find">
</ext:Button>
<ext:Button runat="server" Text="Excel" Icon="PageExcel">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column Text="level" DataIndex="level" runat="server">
<HeaderItems>
<ext:ComboBox ID="ff_level" runat="server" Icon="Find">
</ext:ComboBox>
</HeaderItems>
</ext:Column>
<ext:DateColumn runat="server" Width="150" Text="date" DataIndex="date" Format="dd/MMM/yyyy hh:mm:ss a">
<HeaderItems>
<ext:DropDownField runat="server" ID="ddFecha" AllowBlur="true" MatchFieldWidth="false"
Icon="Find">
<Component>
<ext:FormPanel runat="server" Height="100" Frame="true" Width="250">
<Items>
<ext:FieldContainer runat="server" FieldLabel="De" LabelWidth="50" Layout="ColumnLayout">
<CustomConfig>
<ext:ConfigItem Name="allowBlur" Value="true" Mode="Raw" />
</CustomConfig>
<Items>
<ext:DateField ID="ff_date_from" runat="server" Vtype="daterange" EndDateField="f2_shift_date_to">
<CustomConfig>
<ext:ConfigItem Name="allowBlur" Value="true" Mode="Raw" />
</CustomConfig>
<Listeners>
<KeyUp Handler="onKeyUp" />
</Listeners>
</ext:DateField>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Component>
</ext:DropDownField>
</HeaderItems>
</ext:DateColumn>
<ext:Column runat="server" Text="logger" Width="150" DataIndex="logger">
<HeaderItems>
<ext:TextField ID="ff_logger" runat="server" EnableKeyEvents="true" Icon="Find">
<DirectEvents>
<KeyUp OnEvent="ApplyFilter" Before="return KeyUpEvent(this,e);">
<EventMask ShowMask="true" CustomTarget="#{gridLog}" Target="CustomTarget" />
</KeyUp>
</DirectEvents>
</ext:TextField>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>

</Items>
</ext:Viewport>
</form>
</body>
</html>

Baidaly
Jun 22, 2013, 12:42 AM
Hello!

Try to use the following sample based on this post: http://forums.ext.net/showthread.php?18592&p=93792&viewfull=1#post93792



<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ Register TagPrefix="ext" Namespace="Ext.Net" Assembly="Ext.Net" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>AppLogViewer</title>
<script runat="server">

</script>
<script type="text/javascript">

var KeyUpEvent = function (sender, e) {
if (e.getKey() != 13) return false;
}


var onRender = function (field) {
field.getPicker().el.on(
"mousedown",
function (e) {
// generally, just e.stopEvent() should work instead of the all code below. I will investigate.
var browserEvent = e.browserEvent;

if (browserEvent) {
Ext.EventManager.stopPropagation(browserEvent);
}
e.preventDefault();
});
};

</script>

</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ScriptMode="Debug" />
<ext:Viewport runat="server" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" Region="Center" Frame="false" Layout="FitLayout" Margins="0 2 0 2">
<Items>
<ext:GridPanel runat="server" Header="false" Border="false" ID="gridLog">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button Text="Buscar" runat="server" Icon="Find">
</ext:Button>
<ext:Button runat="server" Text="Excel" Icon="PageExcel">
<Listeners>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
</Store>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn runat="server" />
<ext:Column Text="level" DataIndex="level" runat="server">
<HeaderItems>
<ext:ComboBox ID="ff_level" runat="server" Icon="Find">
</ext:ComboBox>
</HeaderItems>
</ext:Column>
<ext:DateColumn runat="server" Width="150" Text="date" DataIndex="date" Format="dd/MMM/yyyy hh:mm:ss a">
<HeaderItems>
<ext:DropDownField runat="server" ID="ddFecha" AllowBlur="true" MatchFieldWidth="false"
Icon="Find">
<CustomConfig>
<ext:ConfigItem Value="true" Mode="Raw" />
</CustomConfig>
<Component>
<ext:FormPanel runat="server" Height="100" Frame="true" Width="250">
<Items>
<ext:FieldContainer runat="server" FieldLabel="De" LabelWidth="50" Layout="ColumnLayout">
<CustomConfig>
<ext:ConfigItem Value="true" Mode="Raw" />
</CustomConfig>
<Items>
<ext:DateField ID="ff_date_from" runat="server">
<CustomConfig>
<ext:ConfigItem Value="true" Mode="Raw" />
</CustomConfig>
<Listeners>
<KeyUp Handler="onKeyUp" />
<Render Fn="onRender" />
</Listeners>
</ext:DateField>
</Items>
</ext:FieldContainer>
</Items>
</ext:FormPanel>
</Component>
</ext:DropDownField>
</HeaderItems>
</ext:DateColumn>
<ext:Column runat="server" Text="logger" Width="150" DataIndex="logger">
<HeaderItems>
<ext:TextField ID="ff_logger" runat="server" EnableKeyEvents="true" Icon="Find">

</ext:TextField>
</HeaderItems>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
</ext:Panel>

</Items>
</ext:Viewport>
</form>
</body>
</html>

BATCCA
Jun 24, 2013, 4:38 PM
Thanks,

This solves the issue.