[FIXED] [#1496] [4.2.2] JS error on tooltips when drag/drop is used and commit from MVC

[Z]

I cant get seem to reproduce in a testcase but that is because you need a full working MVC backend. the "commit" that occurs in the save causes a problem when tooltips are use (template) AND drag/drop is in play AND MVC commit is done.

I know you like reproducible cases but i cant seem to write it (without an MVC backend i can upload). I can reproduce it 100% of the time. I attached the screenshot of where it crashes. you can see that the Ext.fly is null and this causes the exception.

I attached some more code so you can see where the error is in more detail.

/Z

Ext.define('Ext.tip.QuickTip', {
    extend: 'Ext.tip.ToolTip',
    alias: 'widget.quicktip',
    alternateClassName: 'Ext.QuickTip',


    interceptTitles: false,


    title: '*',


    tagConfig: {
        namespace: 'data-',
        attribute: 'qtip',
        width: 'qwidth',
        target: 'target',
        title: 'qtitle',
        hide: 'hide',
        cls: 'qclass',
        align: 'qalign',
        anchor: 'anchor',
        showDelay: 'qshowDelay',
        hideAction: 'hideAction',
        anchorTarget: 'anchorTarget'
    },
    isQuickTip: true,
    shrinkWrapDock: true,
    initComponent: function() {
        var me = this,
            cfg = me.tagConfig,
            attr = cfg.attr || (cfg.attr = cfg.namespace + cfg.attribute);


        me.delegate = Ext.Function.bind(me.delegate, me);
        me.target = me.target || Ext.getDoc();
        me.targets = me.targets || {};
        me.callParent();
    },
    setTagConfig: function(cfg) {
        this.tagConfig = Ext.apply({}, cfg);


        delete this.tagConfig.attr;
    },


    text: null,


    register: function(config) {
        var configs = Ext.isArray(config) ? config : arguments,
            i = 0,
            len = configs.length,
            target, j, targetLen;
        for (; i < len; i++) {
            config = configs[i];
            target = config.target;
            if (target) {
                if (Ext.isArray(target)) {
                    for (j = 0 , targetLen = target.length; j < targetLen; j++) {
                        this.targets[Ext.id(target[j])] = config;
                    }
                } else {
                    this.targets[Ext.id(target)] = config;
                }
            }
        }
    },


    unregister: function(el) {
        delete this.targets[Ext.id(el)];
    },


    cancelShow: function(el) {
        var me = this,
            currentTarget = me.currentTarget;
        el = Ext.getDom(el);
        if (me.isVisible()) {
            if (currentTarget.dom === el) {
                me.hide();
            }
        } else if (currentTarget.dom === el) {
            me.clearTimer('show');
        }
    },
    delegate: function(target) {
        var me = this,
            cfg = me.tagConfig,
            attr = cfg.attr || (cfg.attr = cfg.namespace + cfg.attribute),
            text;


        text = target.getAttribute(attr) || (me.interceptTitles && target.title);
        return !!text;
    },


    getTipText: function(target) {
        var titleText = target.title,
            cfg = this.tagConfig,
            attr = cfg.attr || (cfg.attr = cfg.namespace + cfg.attribute),
            text;
        if (this.interceptTitles && titleText) {
            target.setAttribute(attr, titleText);
            target.removeAttribute('title');
            return titleText;
        } else {
            return target.getAttribute(attr);
        }
    },
    onTargetOver: function(event) {
        var me = this,
            currentTarget = me.currentTarget,
            target = event.target,
            targets, registeredTarget, key;


        if (!target || target.nodeType !== 1 || target === document.documentElement || target === document.body) {
            return;
        }
        me.pointerEvent = event;
        targets = me.targets;


        for (key in targets) {
            if (targets.hasOwnProperty(key)) {
                registeredTarget = targets[key];


                if (registeredTarget.target && Ext.fly(registeredTarget.target).contains(target) && !Ext.fly(registeredTarget.target).contains(event.relatedTarget)) {
                    target = Ext.getDom(registeredTarget.target);
                    currentTarget.attach(target);
                    me.activeTarget = registeredTarget;
                    registeredTarget.el = currentTarget;
                    me.anchor = registeredTarget.anchor;
                    me.activateTarget();
                    return;
                }
            }
        }


        me.callParent([
            event
        ]);
    },

[Z]

and the MVC backend does this

        public AjaxResult SaveData (string id) {
                            //we want to remove the record since it is processed so we use the delete record option
                            ModelProxy record = store.GetById(id);
                            store.Remove(record);
                            store.CommitRemoving(punchPairUI.id);
         }

i verified that if i comment out the "store.Remove" line, the error disappears.
That means the JS code that generated from this is removing the target but there is a bug that isnt fully removed and hence the JS error.

For you to reproduce, just create an MVC controller, that does the same as above. Then modify the Button (in the example) to be a DirectEvent and it will crash likely. If you want a full example project (dropbox link) let me know. hopefully, this is enough for you to find the issue.

/Z

[fabricio.murta]

Hello @Z!

MVC examples have been provided and simplified by customers over time with no issues.

See these two examples:
- Using Razor syntax
- Using ASP Engine

You also can base your test case from any of our examples in MVC Examples Explorer.
Of course, in MVC test cases we can't have it all copy-paste, but just namespace and path changes have been enough to reproduce the test cases provided in that format.

[fabricio.murta]

Hello again, @Z!

Even with the information you provided, I'm quite clueless on how could I draw a scenario where the dragdrop will happen like in your code and how is the commit triggered, how is it supposed to be handled back as well. It looks like a lot of guesswork to try and reproduce your issue without more directions.

I hope the previous post helps you seeing ways to draw test case scenarios considering the MVC influence over the example, as you suggest it is inherent to this bug. Maybe you can find this or a very close scenario in one of the (grid panel-related?) examples in MVC Examples Explorer.

[Z]

Can you please supply a fully working simple solution (MVC with a direct even call) that i can use to replicate the error. all i am doing is fighting with the online examples. I expected to unzip the files (downloaded from example explorer), add to a vanilla project and run it. but it just doesnt work!

http://mvc.ext.net/#/GridPanel_Edita..._DirectMethod/ is missing the shared file when i download it. any css?

I would like to download example below below as a sln zip so i can replicate the issue. Or even just a single page example that has a directEvent call so i can replicate it. when i use onEvent within script tag, i get a ProfileComponent errors. My solution just isnt configured for these static examples.

My MVC stuff is crashing all the time (from this) and this is a critical issue since we are stuck again trying to upgrade.

/Z

[fabricio.murta]

Hello @Z!

I bet you will be able to run this example with no issues! Take a look:

- view: /Views/issues/c61968_directSave.cshtml

@{
    Layout = null;

    var today = DateTime.Today;

    var myData = new List<object>
    {
        new { ID = 1, Name = "3m Co", Price = 71.72, Change = 0.02, PctChange = 0.03, LastChange = today },
        new { ID = 2, Name = "Alcoa Inc", Price = 29.01, Change = 0.42, PctChange = 1.47, LastChange = today },
        new { ID = 3, Name = "Altria Group Inc", Price = 83.81, Change = 0.28, PctChange = 0.34, LastChange = today },
        new { ID = 4, Name = "American Express Company", Price = 52.55, Change = 0.01, PctChange = 0.02, LastChange = today },
        new { ID = 5, Name = "American International Group, Inc.", Price = 64.13, Change = 0.31, PctChange = 0.49, LastChange = today },
        new { ID = 6, Name = "AT&T Inc.", Price = 31.61, Change = -0.48, PctChange = -1.54, LastChange = today },
        new { ID = 7, Name = "Boeing Co.", Price = 75.43, Change = 0.53, PctChange = 0.71, LastChange = today },
        new { ID = 8, Name = "Caterpillar Inc.", Price = 67.27, Change = 0.92, PctChange = 1.39, LastChange = today },
        new { ID = 9, Name = "Citigroup, Inc.", Price = 49.37, Change = 0.02, PctChange = 0.04, LastChange = today },
        new { ID = 10, Name = "E.I. du Pont de Nemours and Company", Price = 40.48, Change = 0.51, PctChange = 1.28, LastChange = today },
        new { ID = 11, Name = "Exxon Mobil Corp", Price = 68.1, Change = -0.43, PctChange = -0.64, LastChange = today },
        new { ID = 12, Name = "General Electric Company", Price = 34.14, Change = -0.08, PctChange = -0.23, LastChange = today },
        new { ID = 13, Name = "General Motors Corporation", Price = 30.27, Change = 1.09, PctChange = 3.74, LastChange = today },
        new { ID = 14, Name = "Hewlett-Packard Co.", Price = 36.53, Change = -0.03, PctChange = -0.08, LastChange = today },
        new { ID = 15, Name = "Honeywell Intl Inc", Price = 38.77, Change = 0.05, PctChange = 0.13, LastChange = today },
        new { ID = 16, Name = "Intel Corporation", Price = 19.88, Change = 0.31, PctChange = 1.58, LastChange = today },
        new { ID = 17, Name = "International Business Machines", Price = 81.41, Change = 0.44, PctChange = 0.54, LastChange = today },
        new { ID = 18, Name = "Johnson & Johnson", Price = 64.72, Change = 0.06, PctChange = 0.09, LastChange = today },
        new { ID = 19, Name = "JP Morgan & Chase & Co", Price = 45.73, Change = 0.07, PctChange = 0.15, LastChange = today },
        new { ID = 20, Name = "McDonald\"s Corporation", Price = 36.76, Change = 0.86, PctChange = 2.40, LastChange = today },
        new { ID = 21, Name = "Merck & Co., Inc.", Price = 40.96, Change = 0.41, PctChange = 1.01, LastChange = today },
        new { ID = 22, Name = "Microsoft Corporation", Price = 25.84, Change = 0.14, PctChange = 0.54, LastChange = today },
        new { ID = 23, Name = "Pfizer Inc", Price = 27.96, Change = 0.4, PctChange = 1.45, LastChange = today },
        new { ID = 24, Name = "The Coca-Cola Company", Price = 45.07, Change = 0.26, PctChange = 0.58, LastChange = today },
        new { ID = 25, Name = "The Home Depot, Inc.", Price = 34.64, Change = 0.35, PctChange = 1.02, LastChange = today },
        new { ID = 26, Name = "The Procter & Gamble Company", Price = 61.91, Change = 0.01, PctChange = 0.02, LastChange = today },
        new { ID = 27, Name = "United Technologies Corporation", Price = 63.26, Change = 0.55, PctChange = 0.88, LastChange = today },
        new { ID = 28, Name = "Verizon Communications", Price = 35.57, Change = 0.39, PctChange = 1.11, LastChange = today },
        new { ID = 29, Name = "Wal-Mart Stores, Inc.", Price = 45.45, Change = 0.73, PctChange = 1.63, LastChange = today }
    };
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>

    <script>
        var template = 'color:{0};';

        var change = function (value, meta) {
            meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
            return value;
        };

        var pctChange = function (value, meta) {
            meta.style = Ext.String.format(template, (value > 0) ? "green" : "red");
            return value + "%";
        };

        var edit = function (editor, e) {
            if (!(e.value === e.originalValue || (Ext.isDate(e.value) && Ext.Date.isEqual(e.value, e.originalValue)))) {
                Ext.net.DirectMethod.request({
                    url: '@(Url.Action("c61698_edit"))',
                    params: {
                        id: e.record.data.ID,
                        field: e.field,
                        oldValue: e.originalValue,
                        newValue: e.value,
                        customer: e.record.data
                    }
                });
            }
        };
    </script>
</head>
<body>
    <div>
        @Html.X().ResourceManager().ScriptMode(Ext.Net.ScriptMode.Debug).SourceFormatting(true)

        <h1>Editable GridPanel With Save To [DirectMethod]</h1>

        @(Html.X().GridPanel()
            .Title("Editable GridPanel")
            .Width(600)
            .Height(350)
            .Store(Html.X().Store()
                .ID("Store1")
                .Model(Html.X().Model()
                    .IDProperty("ID")
                    .Fields(
                        new ModelField("ID", ModelFieldType.Int),
                        new ModelField("Name"),
                        new ModelField("Price", ModelFieldType.Float),
                        new ModelField("Change", ModelFieldType.Float),
                        new ModelField("PctChange", ModelFieldType.Float),
                        new ModelField("LastChange", ModelFieldType.Date)
                    )
                )
                .DataSource(myData)
            )
            .ColumnModel(
                Html.X().Column().Text("ID").DataIndex("ID").Width(35),
                Html.X().Column()
                    .Text("Name")
                    .DataIndex("Name")
                    .Flex(1)
                    .Editor(Html.X().TextField()),
                Html.X().Column()
                    .Text("Price")
                    .DataIndex("Price")
                    .Renderer(RendererFormat.UsMoney)
                    .Editor(Html.X().NumberField()),
                Html.X().Column()
                    .Text("Change")
                    .DataIndex("Change")
                    .Renderer("change")
                    .Editor(Html.X().NumberField()),
                 Html.X().Column()
                    .Text("PctChange")
                    .DataIndex("PctChange")
                    .Renderer("pctChange")
                    .Editor(Html.X().NumberField()),
                Html.X().DateColumn()
                    .Text("Last Updated")
                    .DataIndex("LastChange")
                    .Format("yyyy-MM-dd")
                    .Editor(Html.X().DateField().Format("yyyy-MM-dd"))
            )
            .SelectionModel(Html.X().CellSelectionModel())
            .Plugins(
                Html.X().CellEditing().Listeners(ls => ls.Edit.Fn = "edit")
            )
        )
    </div>
</body>
</html>

- controller: /controllers/issuesController.cs

public ActionResult c61968_directSave() { return View(); }

public DirectResult c61698_edit(int id, string field, string oldValue, string newValue, object customer)
{
    string message = "<b>Property:</b> {0}<br /><b>Field:</b> {1}<br /><b>Old Value:</b> {2}<br /><b>New Value:</b> {3}";

    // Send Message...
    X.Msg.Notify(new NotificationConfig()
    {
        Title = "Edit Record #" + id.ToString(),
        Html = string.Format(message, id, field, oldValue, newValue),
        Width = 250,
        Height = 150
    }).Show();

    X.GetCmp<Store>("Store1").GetById(id).Commit();

    return this.Direct();
}

If you want to avoid any mistakes or mishaps, you can follow these steps to run this:
1. create a new controller on your project, called issues (lowercase). Create it from the simplest MVC5 (or 4) controller template Visual Studio offers you.
- to create the controller, browse (within solution explorer) to your project's /Controllers folder, right-click, choose Add... then Controller.... Name it issues

2. the newly created controller will have just an Index() action/method. Leave it there (won't hurt). Then paste the controller code (provided above) on the same block (namespace/class) the Index() one is.

- Notice the first method in the controller sample must match the file name of the view that will be created in the next step. The second must match the Url.Action() reference in the view.

3. now browse (still in solution explorer) to /Views/issues (when you create the controller it should create the folder -- if not, create it then)

4. If there's the Index.cshtml file, just copy it over + rename to the View file c61968_directSave.cshtml. If not, right-click the issues folder, Add... then View.... Name it after c61968_directSave (VS deals with the extension), and ensure you leave the 'layout' and the 'partial view' settings blank/unchecked.

5. Open the view (should be that .cshtml file) and paste the view code provided above.

6. Build + run the code.

It should work on your side just fine then! I am sure a lot of things here you are already aware about but I tried to corner the most situations that could break the sample the possible! Looking forward to your feedback, I hope we can get closer to a solution that will work for you from this point.