Sep 18, 2017, 11:10 AM
[FIXED] [#1549] [4.4.1] Desktop - after shortcut removal an error occures when adding a new one
Hello support team,
when dragging an item from the Start menu to desktop, I can create a new shortcut. This does not work if any of the existing shortcuts has been removed before dragging a new one: "Cannot read property 'insertBefore' of null" error occurs.
Steps to reproduce:
- drag a new shortcut on the desktop area
- remove a shortcut from the desktop area (Start menu -> "Remove...")
- drag again a new shortcut on the desktop area
Thank you for your help.
Dan
when dragging an item from the Start menu to desktop, I can create a new shortcut. This does not work if any of the existing shortcuts has been removed before dragging a new one: "Cannot read property 'insertBefore' of null" error occurs.
Steps to reproduce:
- drag a new shortcut on the desktop area
- remove a shortcut from the desktop area (Start menu -> "Remove...")
- drag again a new shortcut on the desktop area
Thank you for your help.
Dan
@using Ext.Net;
@using Ext.Net.MVC;
@{
ViewBag.Title = "Desktop Drag & Drop Example - FabrÃ*cio's Solution";
Layout = null;
var X = Html.X();
List<MenuItem> startMenu = new List<Ext.Net.MenuItem>();
var dragSourceList = new List<DragSource.Builder>();
foreach (var menuEntry in new[]
{
new { id = "EU", text = "European Union", icon = Icon.FlagEuropeanunion },
new { id = "US", text = "United States", icon = Icon.FlagUs }
})
{
startMenu.Add(new MenuItem()
{
ID = menuEntry.id,
Icon = menuEntry.icon,
Text = menuEntry.text
});
dragSourceList.Add(X.DragSource()
.Target(menuEntry.id)
.IsTarget(false)
.Group("desktopDD")
.StartDrag(a => a.Fn = "App.ddOverrides.startDrag")
.OnDragEnter(a => a.Fn = "App.ddOverrides.onDragEnter")
.OnDragOut(a => a.Fn = "App.ddOverrides.onDragOut")
.OnInvalidDrop(a => a.Fn = "App.ddOverrides.invalidateDrop")
.EndDrag(a => a.Fn = "App.ddOverrides.endDrag")
);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Ext.NET MVC Test Case</title>
<style>
.x-default-shortcut {
background: url("http://www.nlm.cz/img/logoNewlink.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.dropOK {
background-color: #99ff99 !important;
}
.dropNotOK {
border: 1px solid #FF0000 !important;
}
</style>
<script type="text/javascript">
Ext.onReady(function () {
//
});
function desktopReady() {
//
}
function createModule(moduleId) {
var eventCfg = {
url: "/Desktop/AddModule/", extraParams: { desktopId: "_nelisDesktop", moduleId: moduleId },
cleanRequest: true,
method: "POST",
userSuccess: function (result, response) {
console.log("direct event ok");
}
};
//Ext.net.DirectEvent.request(eventCfg);
// OR
var item = Ext.getCmp(moduleId);
var newModuleId = "dynModule_" + moduleId;
console.log("newModuleId", newModuleId);
App._nelisDesktop.addModule(Ext.create("Ext.ux.desktop.Module", {
id: newModuleId,
shortcut: { name: item.text, module: newModuleId, IconCls: "x-default-shortcut", handler: function () { var item = Ext.getCmp(moduleId); console.log(item); } },
autoRun: true
}));
App._nelisDesktop.getModule(newModuleId).addLauncher({ xtype: "menuitem", text: item.text });
App._nelisDesktop.getModule(newModuleId).addWindow(
function () {
App._nelisDesktop.getModule(newModuleId).setWindow(
{
autoRender: false,
height: 300,
width: 300,
xtype: "window",
title: item.text,
iconCls: "#ApplicationAdd",
defaultRenderTo: "form"
});
});
}
var removeShortcut = function (title) {
var moduleId = "dynModule_" + (title == "EuropeanUnion" ? "EU" : "US");
var shortcutId = title + "-shortcut";
Ext.get(shortcutId).destroy();
Ext.net.Desktop.removeModule(moduleId);
}
Ext.ns("App").ddOverrides = {
// Called the instant the element is dragged.
startDrag: function () {
console.log("startDrag");
// Cache the drag "phantom" element
if (!this.dEl) {
this.dEl = Ext.get(this.getDragEl());
}
// Cache the original element
if (!this.el) {
this.el = Ext.get(this.getEl());
}
// Make the original icon less visible to indicate it is really about to be moved
this.el.applyStyles({ opacity: 0.4 });
this.dEl.applyStyles({
border: "",
// Trim the sides to 8 pixels to have it match the icons
width: (this.el.getWidth() - 8) + "px",
height: (this.el.getHeight() - 8) + "px",
"z-index": 2000
});
// Create an exact copy of the element on the cursor
this.dEl.update(this.el.dom.innerHTML);
// adding this class is the trick to have drop areas to work
// If you just avoid this and then use this.el.dom.outerHTML above, the mouse will
// be always above the div and will never trigger an dropEnter event.
this.dEl.addCls(this.el.dom.className);
this.lastTarget = null;
},
invalidateDrop: function () {
this.invalidDrop = true;
},
// Called when the drag operation completes
endDrag: function () {
console.log("endDrag");
// Create the animation configuration object
var animCfgObj = {
easing: 'ease',
duration: 500,
opacity: 1,
scope: this,
};
var success = !this.invalidDrop;
delete this.invalidDrop;
// Remove the drag/drop effects on the original element
this.el.removeCls('dropOK');
this.el.applyStyles({ opacity: 1 });
// Invoke the animation according to the drop success/failure
if (success) {
// After dragging, remove transparency effect of moved element.
this.el.animate(animCfgObj);
this.dEl.animate({
easing: 'ease',
duration: 2500,
opacity: 0.1, // left by purpose to see the hiding work
scope: this,
callback: function () { this.dEl.hide(); }
});
console.log('success end drag');
} else {
console.log('failure end drag');
this.dEl.hide();
}
return success;
},
// Only called when the drag element is dragged over the a drop target with the same ddgroup
onDragEnter: function (evtObj, targetElId) {
console.log("onDragEnter");
// Colorize the drag target if the drag node's parent is not the same as the drop target
if (targetElId != this.el.dom.parentNode.id) {
this.el.addCls('dropOK');
this.dEl.addCls('dropOK');
this.lastTarget = Ext.get(targetElId);
} else {
// Remove the invitation
this.onDragOut();
this.lastTarget = null;
}
},
// Only called when element is dragged out of a dropzone with the same ddgroup
onDragOut: function (evtObj, targetElId) {
console.log("onDragOut");
this.el.removeCls('dropOK');
this.dEl.removeCls('dropOK');
this.lastTarget = null;
},
notifyDrop: function (dd, e, data) {
console.log('notifyDrop');
console.log(dd);
console.log(e);
console.log(data);
createModule(dd.id);
return true;
}
};
</script>
</head>
<body>
@Html.X().ResourceManager()
@(Html.X().Desktop()
.ID("_nelisDesktop")
.Listeners(l => l.Ready.Fn = "desktopReady")
.DesktopConfig(
Html.X().DesktopConfig()
.ID("_nelisDesktop_Area")
.SortShortcuts(true)
.ShortcutDefaults(defaults => defaults.IconCls = "x-default-shortcut")
.WallpaperStretch(true)
.ShortcutDragSelector(true)
)
.StartMenu(
Html.X().DesktopStartMenu()
.ID("_nelisDesktop_StartMenu")
.Title("Allegro Desktop")
.Icon(Icon.Application)
.MenuItems(startMenu)
.Width(400)
.Height(150)
.ToolConfig(
Html.X().Toolbar()
.Width(200)
.Items(
Html.X().Button()
.Icon(Icon.Note)
.Text("Remove Notepad Shortcut")
.OnClientClick("removeShortcut(\"Notepad\")"),
Html.X().Button()
.Icon(Icon.FlagEuropeanunion)
.Text("Remove EU Shortcut")
.OnClientClick("removeShortcut(\"EuropeanUnion\")"),
Html.X().Button()
.Icon(Icon.FlagUs)
.Text("Remove US Shortcut")
.OnClientClick("removeShortcut(\"UnitedStates\")")
)
)
)
.TaskBar(
Html.X().DesktopTaskBar()
.TrayWidth(40)
.QuickStartWidth(75)
.QuickStart(
Html.X().Toolbar()
.Items(
Html.X().Button()
.Icon(Icon.ApplicationTileVertical)
.ToolTip("Tile windows")
.OverflowText("Tile windows"),
Html.X().Button()
.Icon(Icon.ApplicationCascade)
.ToolTip("Cascade windows")
.OverflowText("Cascade windows"),
Html.X().Button()
.Icon(Icon.ApplicationViewIcons)
.ToolTip("Default icons positions")
)
)
)
.Modules(
Html.X().DesktopModule()
.ModuleID("Notepad")
.Shortcut(new DesktopShortcut {
Name = "Notepad",
IconCls = "x-default-shortcut",
X = "250",
Y = "250",
Handler = "console.log('notepad_clicked')"
})
)
)
@{
foreach (var dds in dragSourceList) {
@(dds)
}
}
@(X.DropZone()
.Target("_nelisDesktop_Area-body")
.Group("desktopDD")
.IsTarget(true)
.OnContainerDrop(a => a.Fn = "App.ddOverrides.onDrop")
.NotifyDrop(a => a.Fn = "App.ddOverrides.notifyDrop")
.OnNodeDrop(a => a.Fn = "App.ddOverrides.nodeDrop")
)
</body>
</html>
Last edited by fabricio.murta; Sep 22, 2017 at 2:58 AM.