[CLOSED] [1.0] Combobox not firing blur event when in gridpanel editor

  1. #1

    [CLOSED] [1.0] Combobox not firing blur event when in gridpanel editor

    I have a combobox editor in a grid column. If I edit the cell, type into it, tab out to next cell, the blur event of the combobox is not fired. In example below, when blur event fires, it will show the current datetime. If you select a value from the combobox list, the blur event will fire. But if you use typeahead, it does not fire until you click somewhere else in the grid.

    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.GridPanel1.Store.Primary.DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },               
                };
    
                this.GridPanel1.Store.Primary.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        <style type="text/css">
            .x-grid3-hd-inner
            {
                white-space: normal !important;
            }
        </style>
    </head>
    <body>
    
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
    
            var change = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
    
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
    
    
           
        </script>
    
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" />
        <div style="padding: 5px;">
            <ext:GridPanel ID="GridPanel1" runat="server" StripeRows="true" Title="Array Grid"
                TrackMouseOver="true" Width="600" Height="350" ClicksToEdit="1" ForceValidation="false">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="company" />
                                    <ext:RecordField Name="price" Type="Float" />
                                    <ext:RecordField Name="change" Type="Float" />
                                    <ext:RecordField Name="pctChange" Type="Float" />
                                    <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                    <ext:RecordField Name="flag" Type="Boolean" DefaultValue="true">
                                    </ext:RecordField>
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel ID="ColumnModel1" runat="server">
                    <Columns>
                        <ext:Column ColumnID="Company" Header="Company Long Header Description Blah" DataIndex="company"
                            Locked="true">
                            <Editor>
                                <ext:ComboBox runat="server" ID="cbCompany">
                                    <Items>
                                        <ext:ListItem Text="3m Co" Value="3m Co" />
                                        <ext:ListItem Text="Alcoa Inc" Value="Alcoa Inc" />
                                    </Items>
                                    <Listeners>
                                        <Blur Handler="Ext.getCmp('lblMsg').setText(new Date().toString())" />
                                    </Listeners>
                                </ext:ComboBox>
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Price Long Header" DataIndex="price" Editable="true">
                            <Renderer Format="UsMoney" />
                            <Editor>
                                <ext:TextField runat="server">
                                </ext:TextField>
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="false" />
                </SelectionModel>
                <View>
                    <ext:LockingGridView EmptyText="No data available." ForceFit="true">
                    </ext:LockingGridView>
                </View>
            </ext:GridPanel>
            <ext:Label runat="server" ID="lblMsg" Text="Nothing Happened Yet">
            </ext:Label>
        </div>
    </body>
    </html>
    Last edited by Daniil; Aug 17, 2010 at 10:05 PM. Reason: [CLOSED]
  2. #2
    yes, there does appear to be an issue when the RowSelectionModel is being used.

    Here's a simplified sample demonstrating the problem.

    Example

    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.GridPanel1.GetStore().DataSource = new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },               
                };
     
                this.GridPanel1.GetStore().DataBind();
            }
        }
    </script>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Simple Array Grid - Ext.NET Examples</title>
        
        <script type="text/javascript">
            var template = '<span style="color:{0};">{1}</span>';
     
            var change = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value);
            };
     
            var pctChange = function(value) {
                return String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:GridPanel 
            ID="GridPanel1" 
            runat="server" 
            StripeRows="true" 
            Title="Array Grid"
            TrackMouseOver="true" 
            Width="600" 
            Height="350" 
            ClicksToEdit="1" 
            ForceValidation="false">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="company" />
                                <ext:RecordField Name="price" Type="Float" />
                                <ext:RecordField Name="change" Type="Float" />
                                <ext:RecordField Name="pctChange" Type="Float" />
                                <ext:RecordField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
                                <ext:RecordField Name="flag" Type="Boolean" DefaultValue="true" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column 
                        ColumnID="Company" 
                        Header="Company Long" 
                        DataIndex="company"
                        Locked="true">
                        <Editor>
                            <ext:ComboBox runat="server" ID="cbCompany">
                                <Items>
                                    <ext:ListItem Text="3m Co" Value="3m Co" />
                                    <ext:ListItem Text="Alcoa Inc" Value="Alcoa Inc" />
                                </Items>
                                <Listeners>
                                    <Blur Handler="#{lblMsg}.setText(new Date().toString())" />
                                </Listeners>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                    <ext:Column Header="Price Long Header" DataIndex="price" Editable="true">
                        <Renderer Format="UsMoney" />
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel runat="server" />
            </SelectionModel>
        </ext:GridPanel>
        <ext:Label runat="server" ID="lblMsg" Text="Nothing Happened Yet" />
    </body>
    </html>
    We are investigating.
    Geoffrey McGill
    Founder
  3. #3
    Hi,

    It seems that browser doesn't raise blur event when control is hidden (grid hides control when you click tab key). I am not sure about possible fix but you can use the following workaround
    - use the following grid's listener
    <AfterRender Handler="this.getColumnModel().getCellEditor(0).on('canceledit', myFn, this); this.getColumnModel().getCellEditor(0).on('complete', myFn, this);" />
  4. #4
    Quote Originally Posted by vladimir View Post
    Hi,

    It seems that browser doesn't raise blur event when control is hidden (grid hides control when you click tab key). I am not sure about possible fix but you can use the following workaround
    - use the following grid's listener
    <AfterRender Handler="this.getColumnModel().getCellEditor(0).on('canceledit', myFn, this); this.getColumnModel().getCellEditor(0).on('complete', myFn, this);" />
    This worked back in v0.8 though. Does v1.0 grid handle tab key differently?
  5. #5
    Hi,

    Does v1.0 grid handle tab key differently?
    May be. I am not sure because there is a big difference between ExtJS 2.3 and ExtJS 3.3.0

    We have added Listeners to EditorOptions and you can use Complete and CancelEdit
    <ext:Column
                        ColumnID="Company"
                        Header="Company Long"
                        DataIndex="company"
                        Locked="true">
                        <Editor>
                            <ext:ComboBox runat="server" ID="cbCompany">
                                <Items>
                                    <ext:ListItem Text="3m Co" Value="3m Co" />
                                    <ext:ListItem Text="Alcoa Inc" Value="Alcoa Inc" />
                                </Items>
                            </ext:ComboBox>
                        </Editor>
                        <EditorOptions>
                            <Listeners>
                                <CancelEdit Fn="myFn" />
                                <Complete Fn="myFn" />
                            </Listeners>
                        </EditorOptions>
                    </ext:Column>

Similar Threads

  1. Desktop Window gridpanel direct event not firing
    By Karun Javvadi in forum 2.x Help
    Replies: 0
    Last Post: Jul 31, 2012, 12:16 PM
  2. [CLOSED] Blur event for HTML Editor
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 03, 2011, 1:40 PM
  3. RemoteValidation help (not firing on second blur)
    By Tallmaris in forum 1.x Help
    Replies: 5
    Last Post: Jul 07, 2011, 12:06 PM
  4. Replies: 2
    Last Post: May 05, 2011, 10:16 AM
  5. send extra parameters on blur event of textfield editor inside gridpanel
    By aditya.murthy88@gmail.com in forum 1.x Help
    Replies: 2
    Last Post: Dec 11, 2010, 12:04 PM

Posting Permissions