the X and Y are in pixels ?
Correct.
are the shortcuts align to a grid ?
There is a DataView used to render shortcuts.
How can I resize this grid, so I can precise the pixel where i want the shortcut ??
I see the problem. You can set up arbitrary X and Y, but they are adjusted to not let shortcuts overlap. I don't see API options to change that, but found out where this job is done in Desktop - in
.arrangeShortcuts()
method.
arrangeShortcuts : function (ignorePosition, ignoreTemp) {
var col = { index: 1, x: 10 },
row = { index: 1, y: 10 },
records = this.shortcuts.getRange(),
area = this.getComponent(0),
view = this.getComponent(1),
height = area.getHeight();
for (var i = 0, len = records.length; i < len; i++) {
var record = records[i],
tempX = record.get('tempX'),
tempY = record.get('tempY'),
x = record.get('x'),
y = record.get('y'),
xEmpty = Ext.isEmpty(x),
yEmpty = Ext.isEmpty(y);
if(ignoreTemp !== true){
x = Ext.isEmpty(x) ? tempX : x;
y = Ext.isEmpty(y) ? tempY : y;
}
if (Ext.isEmpty(x) || Ext.isEmpty(y) || ignorePosition === true) {
this.setShortcutPosition(record, height, col, row, view);
}
else {
x = !xEmpty && Ext.isString(x) ? eval(x.replace('{DX}', 'area.getWidth()')) : x;
y = !yEmpty && Ext.isString(y) ? eval(y.replace('{DY}', 'area.getHeight()')) : y;
x = x - (x % (this.alignToGrid ? 66 : 1));
y = y - (y % (this.alignToGrid ? 91 : 1));
Ext.fly(view.getNode(record)).setXY([x, y]);
if(!xEmpty && !yEmpty){
record.data.x = x;
record.data.y = y;
}
record.data.tempX = x;
record.data.tempY = y;
}
}
}
You can try to override this method to "resize" a shortcuts "grid".
Or just get rid of any adjustment.
Ext.ux.desktop.Desktop.override({
arrangeShortcuts: Ext.emptyFn
});
Example
<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET v3 Example</title>
<script>
Ext.ux.desktop.Desktop.override({
arrangeShortcuts: Ext.emptyFn
});
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Desktop runat="server">
<Modules>
<ext:DesktopModule ModuleID="Module1">
<Shortcut Name="Module 1" X="50" Y="50" />
<Window>
<ext:Window runat="server" Title="Module 1" />
</Window>
</ext:DesktopModule>
<ext:DesktopModule ModuleID="Module2">
<Shortcut Name="Module 2" X="70" Y="70" />
<Window>
<ext:Window runat="server" Title="Module 2" />
</Window>
</ext:DesktopModule>
</Modules>
</ext:Desktop>
</form>
</body>
</html>