[FIXED] [#258] Javascript error IE 8, 9 10

[Akpenob]

Hello Members.

I am kinda running my head against the wall here.

when i drag a portlet from one column to another i get an error.
the error occurs when you have a toolbar that has a dragdrop plugin on it, the tool bar does not need to be on the portlet, it just need to be in the same application..

I am getting an error on the components offsetwidth when you try to drag it, i have trace it back to this

// this is a part of ext.axd?v=17450

getLocation: function(i) {
        if (!this.isTypeOfDD(i)) {
            return null
        }
        if (i.getRegion) {
            return i.getRegion()
        }
        var g = i.getEl(), m, d, c, o, n, p, a, k, h;
        try {
            m = Ext.Element.getXY(g)
        } catch (j) {
        }
        if (!m) {
            return null
        }
        d = m[0];
        c = d + g.offsetWidth; // this is the part that courses the error !!!!!... // line 22815
        o = m[1];
        n = o + g.offsetHeight;
        p = o - i.padding[0];
        a = c + i.padding[1];
        k = n + i.padding[2];
        h = d - i.padding[3];
        return new Ext.util.Region(p, a, k, h)
    },isOverTarget: function(j, a, c) {
        var e = this.locationCache[a.id], i, g, b, d, h;
        if (!e || !this.useCache) {
            e = this.getLocation(a);
            this.locationCache[a.id] = e
        }
        if (!e) {
            return false
        }
        a.cursorIsOver = e.contains(j);
        i = this.dragCurrent;
        if (!i || !i.getTargetCoord || (!c && !i.constrainX && !i.constrainY)) {
            return a.cursorIsOver
        }
        a.overlap = null;
        g = i.getTargetCoord(j.x, j.y);
        b = i.getDragEl();
        d = new Ext.util.Region(g.y, g.x + b.offsetWidth, g.y + b.offsetHeight, g.x);
        h = d.intersect(e);
        if (h) {
            a.overlap = h;
            return (c) ? true : a.cursorIsOver
        } else {
            return false
        }
    }

as mention this only on IE i have this "Bug" error.

Does anyone have a great fix for it..

[Daniil]

Hi @Akpenob,

I have no idea. Could you, please, provide a test case?

[Akpenob]

Hi @Akpenob,

I have no idea. Could you, please, provide a test case?

The artical explans it alot better..

http://stackoverflow.com/questions/1...-error-for-ie7

its the exact same problem.

i will still see if can try and make a test case.. but as of now i cant...

will look into how i can simplify my site for a test case :-)

PS.

what i have been able to find out is that my toolbar witch has a dragdrop feature bound to it, is destroyed when destroy is called on the component.

But for some odd reason the DDmanager remembers the DD witch was bound the toolbar even after the Component is destroyed.

and thos the offsetwidth is null since (g) (insert toolbar id here) is null.

Since the toolbar has been destroyed but the reference is not destroyed in the DragDrop Manager
Then g will end up beeing undefined and this is what creates the error in the code i showed in the last post..

Regards

Akpenob

[Akpenob]

It seems that to prevent this error there is a simple check you have to make.

getLocation: function(i) {
        if (!this.isTypeOfDD(i)) {
            return null
        }
        if (i.getRegion) {
            return i.getRegion()
        }
        var g = i.getEl(), m, d, c, o, n, p, a, k, h;
        if(g == undefined) return null; // this corrects the error...
        try {
            m = Ext.Element.getXY(g)
        } catch (j) {
        }
        if (!m) {
            return null
        }
        ..........

I dont know if this will help.. but i have tried to incorperate it at it fixes my issue but i am not sure if this has any other hidden errors when this return null.

Hope you can ellaporate on this..

Regards

Akpenob

[Akpenob]

It seems that to prevent this error there is a simple check you have to make.

I dont know if this will help.. but i have tried to incorperate it at it fixes my issue but i am not sure if this has any other hidden errors when this return null.

Hope you can ellaporate on this..

Regards

Akpenob

Update:

It seems to be related to Ext.dd.DDM

I have found the exact method that is being call when this error occurs.

Its called Ext.dd.DDM.getLocation

When my toolbar witch resides inside a gridpanel topbar (tbar), witch has a drag drop plugin on is destroyed, either via closing its parent panel or window depending on where it resides..

the toolbar it self is destroyed, but the reference to the dd on the toolbar is not and there for the DDM still thinks the dd is active

and when this method is called the dd is not present in the application thous causing the error since g is undefined..

I was wondering if there is method for manuly telling Ext.dd.DDM to removed the reference apon destroying the toolbar and its dd component..?

Regards

Akpenob

[Daniil]

Thank you for all the details, but, unfortunately, I can't suggest anything without a test case to reproduce.

[Akpenob]

Thank you for all the details, but, unfortunately, I can't suggest anything without a test case to reproduce.

No problem.

I found the solution to my problem it was a bit tricky but this does the trick without the need to alter ext.axd

LIA.ToolBar.Destroy = function (toolbar) {
    var plugins = toolbar.plugins;
    for (var i = 0; i < plugins.length; i++)
    {
        var plug = plugins[i];
        if (plug.dd != undefined) {
            if (plug.dd.groups != undefined) {
                for (var plugKey in plug.dd.groups) {
                    Ext.dd.DDM.removeDDFromGroup(plug.dd, plugKey);
                    delete Ext.dd.DDM.ids[plugKey];
                }
            }
        }
        if (plug.dropTarget != undefined) {
            if (plug.dropTarget.groups != undefined) {
                for (var targetKey in plug.dropTarget.groups) {
                    if (targetKey != 'default') {
                        Ext.dd.DDM.removeDDFromGroup(plug.dropTarget, targetKey);
                        delete Ext.dd.DDM.ids[targetKey];
                    }
                }
            }
        }
    }
    delete Ext.dd.DDM.ids.default[toolbar.id];
}

What this does it removes every reference there was to the plugins on the toolbar when the component is destroyed.
this takes every dd on the plugins and cleans them from DDM.

After this there is no error..

hope this give some insigt to the problem :-)

Regards

Akpenob

[Akpenob]

Finaly i got a test version that reproduces the error.

This is the web code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DemoSite.aspx.cs" Inherits="LIA.APP.WEB.LinkItAll.DemoSite" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        var LIA = LIA || {};
        LIA.Toolbar = {};
        LIA.Toolbar.AfterLayout = function (toolbar, grid) {
            toolbar.addDDGroup(grid.child('headercontainer').reorderer.dragZone.ddGroup);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
     <ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Disabled"
        EnableViewState="false" />
        <ext:Viewport ID="viewMain" Layout="BorderLayout" runat="server">
        <Items>
            <ext:Panel ID="pnlWest" runat="server" Region="West" Width="200" Closable="true">
                <Items>

                </Items>
            </ext:Panel>
            <ext:Panel ID="viewMainLayout" runat="server" Flex="1" Layout="FitLayout" Region="Center">
                <Items>
                    <ext:Portal ID="Portal1" Layout="FitLayout" runat="server">
                        <Items>
                            <ext:PortalColumn ID="col1" runat="server" Width="300">
                                <Items>
                                    <ext:Portlet ID="p1" Title="P1" runat="server" Height="400"></ext:Portlet>
                                </Items>
                            </ext:PortalColumn>
                            <ext:PortalColumn ID="col2" Title="P2" runat="server" Width="300">
                                <Items>
                                        <ext:Portlet ID="p2" runat="server" Height="400"></ext:Portlet>
                                </Items>
                            </ext:PortalColumn>
                            <ext:PortalColumn ID="col3" Title="P3" runat="server" Width="300">
                                <Items>
                                        <ext:Portlet ID="p3" runat="server" Height="400"></ext:Portlet>
                                </Items>
                                                   
                            </ext:PortalColumn>            
                        </Items>
                    </ext:Portal>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

This is the code behind

using Ext.Net;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace LIA.APP.WEB.LinkItAll
{
    public partial class DemoSite : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            GridPanel grid = new GridPanel();
            grid.ID = "gridTest";

            Store gridStore = new Store();
            gridStore = new Store()
            {
                ID = this.ID + "_store",
                AutoDataBind = true,
                AutoDestroy = true,
                AutoLoad = true,
                IsPagingStore = false,
                Model =
                    {
                        new Model()
                        {
                            IDProperty = ""
                        }
                    },
            };

            grid.Store.Add(gridStore);

            ModelField mf = new ModelField("Name");
            gridStore.Model[0].Fields.Add(mf);

            Column col = new Column() { DataIndex = "Name", Text = "Name", Width = 120, Hidden = false };
            col.MenuDisabled = true;
            col.Sortable = false;
            col.Align = Alignment.Left;

            grid.ColumnModel.Columns.Add(col);

            Toolbar toolBar = new Toolbar();
            toolBar.Height = System.Web.UI.WebControls.Unit.Pixel(30);
            toolBar.ID = grid.ID+ "_toolbar";

            ToolbarSeparator seperator = new ToolbarSeparator();

            BoxReorderer barReorder = new BoxReorderer();
            barReorder.ID = grid.ID + "_barReorder";
            toolBar.Plugins.Add(barReorder);
            ToolbarDroppable TDropBar = new ToolbarDroppable();
            TDropBar.ID = grid.ID + "_tBarDrop";
            toolBar.Plugins.Add(TDropBar);

            grid.TopBar.Add(toolBar);

            grid.Listeners.AfterLayout.Handler = "LIA.Toolbar.AfterLayout(#{" + TDropBar.ID + "},#{" + grid.ID + "});"; 

            pnlWest.Items.Add(grid);
        }
    }
}

To reproduce the problem simply just close the west panel and try to drag a portlet from one column to another column..

The solution to this problem lies in my last post.
The method prevents the error from occuring, so i hope this can be usefull :-)

UPDATE:

You can also get this error in firefox, just tried it in that aswell, and it give the same error the dd reference is not gone,
since g is undefined when it tries to get the offsetwidth on g the error will occure :-)

And Daniil thanks again for a great support. :-)

Best Regards

Akpenob

[Daniil]

Thank you for the test case. I reported to Sencha.
http://www.sencha.com/forum/showthread.php?264717

Please try this fix.

Ext.ux.ToolbarDroppable.override({
    destroy: function () {
        if (this.dropTarget) {
            this.dropTarget.destroy();
        }
    }
});

Put this script into a page's <head>.

[Daniil]

Sencha opened a bug ticket and we created an Issue.
https://github.com/extnet/Ext.NET/issues/258

We committed the fix to the SVN trunk. If Sencha fixes it itself, we will remove our fix.