[CLOSED] Chrome v16 - crash of page when LockingGridView don't have any locked column

  1. #1

    [CLOSED] Chrome v16 - crash of page when LockingGridView don't have any locked column

    Hello dear Ext.NET team!

    I have little problem. Every time when I unlock the last column in grid with Licking GridView - page crashes ("Aw, snap" page). It's new problem, that come with new version of Google Chrome - 16.0.912.63 m. Before last Chrome update this problem was not exist.

    You can repeat this bug in your example GridPanel with Locking GridView. Just unlock the last locked column.

    I think that it's not Ext.NET bug, becouse this repeatable on clear ExtJS :) But I hope that you can repair components in your libraries, maybe you will post bug for Sencha.

    Thanks!
    Last edited by Daniil; Jan 13, 2012 at 4:13 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Confirmed.

    Chrome 16 and this code in Developr Tools
    GridPanel1.colModel.setLocked(0, false);
    causes page crashing.

    I think it's rather a Chrome bug and, I think, should be reported to them at the first of all.
  3. #3
    I discovered this problem and it's look like not safely manipulation with DOM. Unfortunatly Locking GridView too large for rewriting by me. I hope that problem will resolve by itself with new Chrome relise, but will be good if somebody will post bug for them ;) Tomorrow I will try post bug for them, but I don't have alot experience in bug reports for browser developers.
  4. #4
    Agree, it would be good to report them.

    Probably, it will be enough to post them an online link with a simple page to reproduce a problem.
  5. #5
    I've reported using the Chrome "Report an issue" feature.
  6. #6
    I've investigated the problem here.

    The problem occurs in the LockingGridView's updateHeaders method.

    Problem
    updateHeaders : function () {
        var hd = this.renderHeaders();
        this.innerHd.firstChild.innerHTML = hd[0];
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
        this.lockedInnerHd.firstChild.innerHTML = hd[1]; /* THE PROBLEM IS HERE */
        var lw = this.getLockedWidth();
        this.lockedInnerHd.firstChild.style.width = lw;
        this.lockedInnerHd.firstChild.firstChild.style.width = lw;
    }
    I'm trying to find any workaround, but not sure I can, because the problem is on DOM level when an html element's innerHTML is updated.

    Here is the full example to test with.

    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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.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 runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var myUpdateHeaders = function () {
                var hd = this.renderHeaders();
                this.innerHd.firstChild.innerHTML = hd[0];
                this.innerHd.firstChild.style.width = this.getOffsetWidth();
                this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
                //this.lockedInnerHd.firstChild.innerHTML = hd[1]; /* THE PROBLEM IS HERE */
                var lw = this.getLockedWidth();
                this.lockedInnerHd.firstChild.style.width = lw;
                this.lockedInnerHd.firstChild.firstChild.style.width = lw;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Locked="true" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:LockingGridView runat="server" />
                </View>
                <Listeners>
                <BeforeRender Handler="this.getView().updateHeaders = myUpdateHeaders;" />
            </Listeners>
            </ext:GridPanel>
            <ext:Button runat="server" Text="Unlock">
            <Listeners>
                <Click Handler="GridPanel1.colModel.setLocked(0, false);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  7. #7
    Quote Originally Posted by Daniil View Post
    I've investigated the problem here.

    The problem occurs in the LockingGridView's updateHeaders method.

    Problem
    updateHeaders : function () {
        var hd = this.renderHeaders();
        this.innerHd.firstChild.innerHTML = hd[0];
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
        this.lockedInnerHd.firstChild.innerHTML = hd[1]; /* THE PROBLEM IS HERE */
        var lw = this.getLockedWidth();
        this.lockedInnerHd.firstChild.style.width = lw;
        this.lockedInnerHd.firstChild.firstChild.style.width = lw;
    }
    I'm trying to find any workaround, but not sure I can, because the problem is on DOM level when an html element's innerHTML is updated.

    Here is the full example to test with.

    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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.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 runat="server">
        <title>Ext.NET Example</title>
    
        <script type="text/javascript">
            var myUpdateHeaders = function () {
                var hd = this.renderHeaders();
                this.innerHd.firstChild.innerHTML = hd[0];
                this.innerHd.firstChild.style.width = this.getOffsetWidth();
                this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
                //this.lockedInnerHd.firstChild.innerHTML = hd[1]; /* THE PROBLEM IS HERE */
                var lw = this.getLockedWidth();
                this.lockedInnerHd.firstChild.style.width = lw;
                this.lockedInnerHd.firstChild.firstChild.style.width = lw;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Locked="true" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:LockingGridView runat="server" />
                </View>
                <Listeners>
                <BeforeRender Handler="this.getView().updateHeaders = myUpdateHeaders;" />
            </Listeners>
            </ext:GridPanel>
            <ext:Button runat="server" Text="Unlock">
            <Listeners>
                <Click Handler="GridPanel1.colModel.setLocked(0, false);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>

    Is there any update for this issue?
  8. #8
    Well, it looks like a Chrome bug, so, I can't fix it, but can suggest the following workaround:

    Workaround
    var myUpdateHeaders = function () {
        var hd = this.renderHeaders();
        this.innerHd.firstChild.innerHTML = hd[0];
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
        if (!(Ext.isChrome && (hd[1] === '<table border="0" cellspacing="0" cellpadding="0" style="width:0px;"><thead><tr class="x-grid3-hd-row"></tr></thead></table>'))) {
            this.lockedInnerHd.firstChild.innerHTML = hd[1];
        }
        var lw = this.getLockedWidth();
        this.lockedInnerHd.firstChild.style.width = lw;
        this.lockedInnerHd.firstChild.firstChild.style.width = lw;
    };
    Here is the full 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[] { "test1", "test2", "test3" },
                    new object[] { "test4", "test5", "test6" },
                    new object[] { "test7", "test8", "test9" },
                };
                this.Store1.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 runat="server">
        <title>Ext.NET Example</title>
     
        <script type="text/javascript">
            var myUpdateHeaders = function () {
                var hd = this.renderHeaders();
                this.innerHd.firstChild.innerHTML = hd[0];
                this.innerHd.firstChild.style.width = this.getOffsetWidth();
                this.innerHd.firstChild.firstChild.style.width = this.getTotalWidth();
                if (!(Ext.isChrome && (hd[1] === '<table border="0" cellspacing="0" cellpadding="0" style="width:0px;"><thead><tr class="x-grid3-hd-row"></tr></thead></table>'))) {
                    this.lockedInnerHd.firstChild.innerHTML = hd[1];
                }
                var lw = this.getLockedWidth();
                this.lockedInnerHd.firstChild.style.width = lw;
                this.lockedInnerHd.firstChild.firstChild.style.width = lw;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <ext:GridPanel ID="GridPanel1" runat="server" Height="200">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Reader>
                            <ext:ArrayReader>
                                <Fields>
                                    <ext:RecordField Name="test1" />
                                    <ext:RecordField Name="test2" />
                                    <ext:RecordField Name="test3" />
                                </Fields>
                            </ext:ArrayReader>
                        </Reader>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server">
                    <Columns>
                        <ext:Column Header="Test1" DataIndex="test1" Locked="true" />
                        <ext:Column Header="Test2" DataIndex="test2" />
                        <ext:Column Header="Test3" DataIndex="test3" />
                    </Columns>
                </ColumnModel>
                <View>
                    <ext:LockingGridView runat="server" />
                </View>
                <Listeners>
                    <BeforeRender Handler="this.getView().updateHeaders = myUpdateHeaders;" />
                </Listeners>
            </ext:GridPanel>
            <ext:Button runat="server" Text="Unlock">
            <Listeners>
                <Click Handler="GridPanel1.colModel.setLocked(0, false);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  9. #9
    I'm marking the thread as closed.

    Please feel free to update the thread if the problem persist.

Similar Threads

  1. [CLOSED] Locked ImageCommand Column
    By paulc in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Feb 24, 2011, 12:08 PM
  2. [CLOSED] Locked column and row alignment
    By Stefanaccio in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 20, 2010, 12:14 PM
  3. [CLOSED] Problem with gridpanel column resizing in firefox and chrome
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 25
    Last Post: Sep 14, 2010, 2:10 PM
  4. [CLOSED] Column/Store field name "Date" and crash of ExtJS
    By pil0t in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 28, 2010, 9:18 PM
  5. Replies: 10
    Last Post: Jul 07, 2008, 10:32 AM

Tags for this Thread

Posting Permissions