[CLOSED] After changing Ext Version from V2.1 to V2.2.0.27432 the GridPanel throws javascript errors on some actions.

  1. #1

    [CLOSED] After changing Ext Version from V2.1 to V2.2.0.27432 the GridPanel throws javascript errors on some actions.

    Team,

    Recently we updated the DLL from V2.1 to V2.2.0.27432, and existing code which used to work with V2.1 does not work properly now.
    Below are the functionalities which give javascript errors on certain actions in the gridpanel.

    In the breaking changes list there are no changes which have been highlighted on these functionalities.

    I have a grid which uses infinite scroll to load the data using OnReadData event. And each cell of the the grid will be having a mouse over event on which there will be tooltip shown based on certain conditions. Everything used to work with V2.1 but after changing it to V2.2 it does not...!

    1. Tooltip for the grid has some action on mouse over, which throws js error(it used to work with V2.1), Click image for larger version. 

Name:	MouseOverError.jpg 
Views:	38 
Size:	96.2 KB 
ID:	5895
    ===== Code behind ==========
       ToolTip toolTip = new ToolTip
            {
                ID = grid.ID + "_ToolTip",
                Target = "={#{" + grid.ID + "}.getView().el}",
                Delegate = ".x-grid-cell",
                //TrackMouse = true,
                Closable = true,
                AutoHide = false,
                Draggable = true,
                AutoFocus = true,
                MouseOffset = new int[] { -9, -9 }
                //Resizable = true,
            };
    
            //toolTip.HideMode = HideMode.Display;
    
            toolTip.Listeners.BeforeShow.Handler = "return onBeforeShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
            toolTip.Listeners.Show.Handler = "onShow(#{" + toolTip.ID + "}, #{" + grid.ID + "});";
            form1.Page.Controls.Add(toolTip);
    ======== js code ================================================== ========
      var onBeforeShow = function(toolTip, grid) {
    
                    var view = grid.getView();
                    store = grid.getStore();
                    rowIndex = view.findItemByChild(toolTip.triggerElement).viewIndex;
                    record = store.getAt(rowIndex);
                    column = view.getHeaderByCell(toolTip.triggerElement);
                    var isToolTipToBeShown = false;
    
                    if (column !== undefined) {
    
                        //checking if the tooltip exists for this cell
                        //data+'_Tooltip'
                        var toolTipColumnIndex = column.dataIndex + '_Tooltip';
                        if (!(record.get(toolTipColumnIndex) == undefined || record.get(toolTipColumnIndex) == null || record.get(toolTipColumnIndex) == '')) {
                            isToolTipToBeShown = true;
                        }
                    }
                    return isToolTipToBeShown;
                };
    
             var onShow = function(toolTip, grid) {
                    debugger;
                    var view = grid.getView();
                    store = grid.getStore();
                    rowIndex = view.findItemByChild(toolTip.triggerElement).viewIndex;
                    record = store.getAt(rowIndex);
                    column = view.getHeaderByCell(toolTip.triggerElement);
                    if (column !== undefined) {
    
                        data = record.get(column.dataIndex);
    
                        //checking if the tooltip exists for this cell
                        //data+'_Tooltip'
                        var toolTipColumnIndex = column.dataIndex + '_Tooltip';
                        if (record.get(toolTipColumnIndex) !== undefined && record.get(toolTipColumnIndex) !== null && record.get(toolTipColumnIndex) !== '') {
                            data = record.get(toolTipColumnIndex);
                            toolTip.focus();
                            toolTip.show();
                            toolTip.update(record.get(toolTipColumnIndex));
                        }
                    }
                };
    ================================================== ===============================

    2. The grid loads the data using Infinite Scrolling method and has a onReadData event, for this there is javascript event written but still it throws error. The same worked with V2.1 but after using the new version it throws javascript error. Click image for larger version. 

Name:	Filters_Error.jpg 
Views:	33 
Size:	95.5 KB 
ID:	5896



    Please request your help on this.

    Cheers...
    Last edited by Daniil; Mar 28, 2013 at 4:21 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Can you provide full test case for your problem? http://forums.ext.net/showthread.php?10205
  3. #3
    Hello,

    Re: ToolTip

    I think I was able to reproduce the problem. Thank you for the report.

    Please replace:
    rowIndex = view.findItemByChild(toolTip.triggerElement).viewIndex;
    record = store.getAt(rowIndex);
    with

    record = store.getAt(view.findItemByChild(toolTip.triggerElement));
    Also you defined those variables as global once. It is a pure practice. I would recommend to define it as local variables.

    Finally, here is a working example.

    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.Store1.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" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, "9/1 12:00am" },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, "9/1 12:00am" },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, "9/1 12:00am" },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, "9/1 12:00am" },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, "9/1 12:00am" },
                    new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, "9/1 12:00am" },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, "9/1 12:00am" },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, "9/1 12:00am" },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, "9/1 12:00am" },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, "9/1 12:00am" },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, "9/1 12:00am" },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, "9/1 12:00am" },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, "9/1 12:00am" },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, "9/1 12:00am" },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, "9/1 12:00am" },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, "9/1 12:00am" },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, "9/1 12:00am" },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, "9/1 12:00am" },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, "9/1 12:00am" },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, "9/1 12:00am" },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
    
                this.Store1.DataBind();
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>GridPanel Row with ToolTip - 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 + "%");
            };
    
            var onShow = function (toolTip, grid) {
                var view = grid.getView(),
                    record = view.getRecord(toolTip.triggerElement),
                    data = Ext.encode(record.data);
                    
                toolTip.update(data);
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>GridPanel Row with ToolTip</h1>
            
            <ext:GridPanel 
                ID="GridPanel1" 
                runat="server" 
                Title="Array Grid" 
                Width="600" 
                Height="350">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model runat="server">
                                <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" DateFormat="M/d hh:mmtt" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
                        <ext:Column runat="server" Text="Price" DataIndex="price">
                            <Renderer Format="UsMoney" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="change">
                            <Renderer Fn="change" />
                        </ext:Column>
                        <ext:Column runat="server" Text="Change" DataIndex="pctChange">
                            <Renderer Fn="pctChange" />
                        </ext:Column>
                        <ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel runat="server" Mode="Single" />
                </SelectionModel>
                <View>
                    <ext:GridView runat="server" StripeRows="true" TrackOver="true" />
                </View>
            </ext:GridPanel>     
            
            <ext:ToolTip 
                runat="server" 
                Target="={#{GridPanel1}.getView().el}"
                Delegate="={#{GridPanel1}.getView().itemSelector}"
                TrackMouse="true">
                <Listeners>
                    <Show Handler="onShow(this, #{GridPanel1});" />
                </Listeners>
            </ext:ToolTip>     
        </form>
    </body>
    </html>
    Re: filtering

    I think I was able to reproduce it as well and reported to Sencha.
    http://www.sencha.com/forum/showthread.php?259656
  4. #4
    Quote Originally Posted by Daniil View Post
    Re: filtering

    I think I was able to reproduce it as well and reported to Sencha.
    http://www.sencha.com/forum/showthread.php?259656
    My report is a duplicate of:
    http://www.sencha.com/forum/showthread.php?259314

    We committed the @Animal's fix to the SVN trunk.

    By the way, please look at this post.
    http://www.sencha.com/forum/showthre...l=1#post949486

    Do you really need a buffered store? How many records do you load into the Store?

Similar Threads

  1. Replies: 2
    Last Post: Mar 19, 2012, 8:55 PM
  2. [CLOSED] UpdateSelection() throws javascript error
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Mar 07, 2011, 11:14 AM
  3. Javascript errors when upgrading to 0.8.2
    By principal_X in forum 1.x Help
    Replies: 4
    Last Post: Jan 07, 2010, 9:06 PM
  4. javascript errors when render
    By nanosassa in forum 1.x Help
    Replies: 2
    Last Post: May 09, 2009, 12:10 PM
  5. [CLOSED] Gridpanel actions
    By reinout.mechant@imprss.be in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Mar 12, 2009, 1:29 PM

Tags for this Thread

Posting Permissions