[CLOSED] DropDown Field Collapsing in Grid Panel Header Item

  1. #1

    [CLOSED] DropDown Field Collapsing in Grid Panel Header Item

    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>
    Last edited by Daniil; Jun 24, 2013 at 4:02 PM. Reason: [CLOSED]
  2. #2
    Hello!

    Try to use the following sample based on this post: http://forums.ext.net/showthread.php...ll=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>
  3. #3
    Thanks,

    This solves the issue.

Similar Threads

  1. Replies: 1
    Last Post: Jun 26, 2013, 5:15 AM
  2. [CLOSED] Problem with Dropdown field in column header of GridPanel
    By BATCCA in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 17, 2012, 3:53 PM
  3. [CLOSED] dropdown field width
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Oct 02, 2012, 7:28 PM
  4. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  5. [CLOSED] Dropdown tool in Window header
    By jchau in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 30, 2010, 4:46 PM

Tags for this Thread

Posting Permissions