[FIXED] [#501] [3.2.0] BottomBar button event is not firing with single click on GridPanel in Internet Explorer browser.

  1. #1

    [FIXED] [#501] [3.2.0] BottomBar button event is not firing with single click on GridPanel in Internet Explorer browser.

    Hi,
    In Ext V2.5 with IE browser, the button event is not firing on single click, if the button is in the BottomBar of GridPanel.
    If the buttons are with in TopBar then no issue. Issue with only ButtomBar and IE browser.

    Thank you.

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData;
                this.Store1.DataBind(); 
            }
        }
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind(); 
        }
        private object[] TestData
        {
            get
            {
                DateTime now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
        
        protected void Store1_RecordUpdated(object sender, AfterRecordUpdatedEventArgs e)
        {
            // This event is fired once for each Record that is Updated.
            string tpl = "Name: {0}, Price: {1}, LastChange: {2}<br />";
            this.Label1.Html += string.Format(tpl, e.Values["company"], e.Values["price"], e.Values["lastChange"]);
        }
    </script>
    <html>
    <head runat="server">
        <title>Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            var template = '<span style="color:{0};">{1}</span>';
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            }
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>GridPanel with editable rows and server save</h1>
            
            <p></p>
            
            <ext:Store 
                ID="Store1" 
                runat="server" 
                OnAfterRecordUpdated="Store1_RecordUpdated" 
                OnReadData="Store1_ReadData"
                PageSize="10">
                <Model>
                    <ext:Model runat="server" IDProperty="company">
                        <Fields>
                            <ext:ModelField Name="company" />
                            <ext:ModelField Name="price" Type="Float" />
                            <ext:ModelField Name="change" Type="Float" />
                            <ext:ModelField Name="pctChange" Type="Float" />
                            <ext:ModelField Name="lastChange" Type="Date" />
                        </Fields>
                    </ext:Model>
                </Model>            
            </ext:Store>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                StoreID="Store1" 
                Title="Array Grid" 
                Width="600" 
                Height="290">
                
                <Plugins>
                    <ext:CellEditing runat="server" />
                </Plugins>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" Width="160" DataIndex="company" Flex="1">
                        <Editor>
                        <ext:TextField runat="server" />
                        </Editor>
                        </ext:Column>                      
                        <ext:Column runat="server" Text="Price" Width="75" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" Width="75" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" Width="85" DataIndex="lastChange">
                            <Editor>
                                <ext:DateField runat="server" />
                            </Editor>
                        </ext:DateColumn>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" LoadMask="true" LoadingText="HI" />
                </View>            
                <BottomBar>
                    <ext:Toolbar runat="server">
                    <Items>
                    <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{Store1}.save();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button2" runat="server" Text="Reload" Icon="ArrowRefresh">
                                <Listeners>
                                    <Click Handler="#{Store1}.reload();" />
                                </Listeners>
                            </ext:Button>
                    </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:GridPanel>
            
            <ext:Label ID="Label1" runat="server" />
        </form>
    </body>
    </html>
    Last edited by Daniil; Jun 26, 2015 at 11:37 AM. Reason: [FIXED] [#501] [3.2.0]
  2. #2
    Hi @iansriley,

    I cannot reproduce.

    Do you mean it is reproducible in IE only, not in other browsers? What version? I tested in IE9, it is OK for me.

    Please clarify how do you conclude that the Click event is not being fired?
  3. #3
    In Chrome and Firefox it is working fine with single click but not in IE10 and IE11.
    Just modify the data in first column and click on "Save" button directly, without clicking any where in the form.
    I tried with alert message on Save button click event handler also. With first click the alert is not getting , with next click only alert message is displaying.

    Thank you.
  4. #4
    I've reproduced. A very weird issue. I cannot understand why it works with a TopBar. I am investigating.
  5. #5
    Please try this fix.
    Ext.view.Table.override({
        refreshSize: function () {
            var me = this,
                grid = me.up('tablepanel');
    
            if (grid.editingPlugin && grid.editingPlugin.editing) {
                Ext.defer(this.refreshSize, 100, me);
                return;
            }
    
            me.callParent();
        }
    });
  6. #6
    Quote Originally Posted by Daniil View Post
    Please try this fix.
    Ext.view.Table.override({
        refreshSize: function () {
            var me = this,
                grid = me.up('tablepanel');
    
            if (grid.editingPlugin && grid.editingPlugin.editing) {
                Ext.defer(this.refreshSize, 100, me);
                return;
            }
    
            me.callParent();
        }
    });
    Issue has been fixed with above script. You can close this thread.
    Thank you.
  7. #7
    Thank you for the feedback.

    I've created an Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/501
  8. #8
    It is no longer reproducible with the latest in SVN trunk. So, the upcoming 3.2.0 release will get rid of that issue. Though, it might be fixed earlier in Ext.NET 3.x as well.

Similar Threads

  1. Replies: 2
    Last Post: Mar 21, 2014, 6:07 AM
  2. Zoom out Button not working internet explorer
    By polen18 in forum 2.x Help
    Replies: 0
    Last Post: Mar 27, 2013, 1:20 PM
  3. [CLOSED] Direct Event Failure Internet Explorer
    By mcfromero in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 14, 2013, 5:09 PM
  4. Replies: 2
    Last Post: May 12, 2011, 9:26 AM
  5. [CLOSED] internet explorer cannot open the internet site
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Apr 28, 2009, 10:30 AM

Tags for this Thread

Posting Permissions