PDA

View Full Version : Resize one item and move others



Dominik
May 22, 2012, 11:20 AM
Hi,

Regarding this other post:

Resizable & Draggable items (http://forums.ext.net/showthread.php?19094-Resizable-amp-Draggable-items)

When several items are thrown over the target area, if one item is resized up or down, and later another one is resized too, all other items are moved up and down.

Is this a bug when an item is draggable and resizable at the same time? Could this behaviour be solved in any way?

Here is the sample code:


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>DragDrop from TreePanel to Div - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.expand-icon {
background-image: url(../resources/images/expand-all.gif) !important;
}
.collapse-icon {
background-image: url(../resources/images/collapse-all.gif) !important;
}
}
</style>
<script type="text/javascript">
var notifyDropHeader = function (dd, e, data) {
if (!data.records[0].get('leaf'))
return false;
createDiv(dd, e, data, Ext.get("drop-header"));
};
var globalIndex = 0;
var createDiv = function (dd, e, data, parentDiv) {
var divTag = document.createElement("div");
divTag.id = data.records[0].id + "_" + globalIndex++;
divTag.className = "dynamicDiv";
divTag.innerHTML = data.records[0].get('text');
divTag.style.margin = "0px auto";
divTag.metadata = data.records[0].get('data');
parentDiv.appendChild(divTag);
//Ext.get(divTag).setLeftTop(0, 0);
makeResizable(divTag.id);
makeDraggable(divTag.id);
}
var makeResizable = function (el) {
new Ext.Resizable(el, {
dynamic: true,
handles: "all",
group: "tree2div",
minHeight: 10,
minWidth: 10,
wrap: true
});
};
var makeDraggable = function (el) {
var dd = new Ext.dd.DDProxy(el, "tree2div");
dd.startDrag = startDrag;
};
</script>
<script type="text/javascript">
var filterTree = function (tf, e) {
var tree = App.treeComponentes,
text = tf.getRawValue();
tree.clearFilter();
if (Ext.isEmpty(text, false)) {
return;
}
if (e.getKey() === Ext.EventObject.ESC) {
clearFilter();
} else {
var re = new RegExp(".*" + text + ".*", "i");
tree.filterBy(function (node) {
return re.test(node.data.text);
});
}
};
var clearFilter = function () {
var field = App.TriggerField1,
tree = App.treeComponentes;
field.setValue("");
tree.clearFilter(true);
tree.getView().focus();
};
</script>
<script type="text/javascript">
var startDrag = function (x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
//this.constrainTo("drop-header");
this.constrainTo(el.getScopeParent().id);
dragEl.applyStyles({ border: '', 'z-index': 2000 });
dragEl.update(el.dom.innerHTML);
dragEl.addCls(el.dom.className + ' dynamicDiv-proxy');
};
</script>
<style type="text/css">
.dynamicDiv
{
font-size : 11px;
height : 18px;
border : 1px solid #a0a0a0;
background-color : #c4d0ff;
vertical-align : middle;
cursor : move;
width: 110px;
padding : 2px;
z-index : 1000;
}

.dynamicDiv-proxy
{
font-size : 11px;
opacity : 0.4;
-moz-opacity : 0.4;
filter : alpha(opacity=40);
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="Fit" AutoScroll="true">
<Content>
<ext:DropTarget runat="server" Target="drop-header" Group="tree2div">
<notifyDrop Fn="notifyDropHeader" />
</ext:DropTarget>
<ext:DDProxy runat="server" Target="dd1-item1" Group="tree2div">
<StartDrag Fn="startDrag" />
</ext:DDProxy>
<ext:Resizer
ID="CustomResizer"
runat="server"
Target="dd1-item1"
Wrap="true"
MinWidth="50"
MinHeight="20"
Handles="All"
Dynamic="true"
/>
</Content>
<Items>
<ext:Panel
runat="server"
Layout="Border">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ButtonGroup
runat="server"
Title="Clipboard"
HeaderPosition="Bottom"
Columns="2">
<Items>
<ext:SplitButton runat="server" Text="Menu Button" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Menu Button 1" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:SplitButton runat="server" Text="Cut" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Cut Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Text="Copy" IconCls="add16" />
<ext:Button runat="server" Text="Paste" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Paste Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Format" IconCls="add16" />
</Items>
</ext:ButtonGroup>
<ext:ButtonGroup
runat="server"
Title="Other Actions"
HeaderPosition="Bottom"
Columns="2">
<Items>
<ext:SplitButton runat="server" Text="Menu Button" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Menu Button 1" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:SplitButton runat="server" Text="Cut" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Cut Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:SplitButton>
<ext:Button runat="server" Text="Copy" IconCls="add16" />
<ext:Button runat="server" Text="Paste" IconCls="add16">
<Menu>
<ext:Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Paste Menu Item" />
</Items>
</ext:Menu>
</Menu>
</ext:Button>
<ext:Button runat="server" Text="Format" IconCls="add16" />
</Items>
</ext:ButtonGroup>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:TreePanel
ID="treeComponentes"
runat="server"
Title="Controls"
Icon="BrickGo"
Collapsible="true"
Split="true"
Width="260"
Region="West"
Margins="0 0 0 2"
EnableDrag="true"
DDGroup="tree2div"
AutoScroll="true"
RootVisible="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:ToolbarTextItem runat="server" Text="Filter:" />
<ext:ToolbarSpacer />
<ext:TriggerField
ID="TriggerField1"
runat="server"
EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyUp Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>
<ext:ToolbarFill />
<ext:Button runat="server" IconCls="expand-icon">
<ToolTips>
<ext:ToolTip runat="server" Html="Expand All" />
</ToolTips>
<Listeners>
<Click Handler="#{treeComponentes}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button runat="server" IconCls="collapse-icon">
<ToolTips>
<ext:ToolTip runat="server" Html="Collapse All" />
</ToolTips>
<Listeners>
<Click Handler="#{treeComponentes}.collapseAll();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="data" />
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<Root>
<ext:Node Text="Root" Expanded="true">
<Children>
<ext:Node Text="Folder 1">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 1 data" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Text="Child 1" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 1 Child 1 data" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Folder 2">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 2 data" Mode="Value" />
</CustomAttributes>
<Children>
<ext:Node Text="Child 2" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Folder 2 Child 2 data" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>

<ext:Node Text="Leaf 1" Leaf="true">
<CustomAttributes>
<ext:ConfigItem Name="data" Value="Leaf 1 data" Mode="Value" />
</CustomAttributes>
</ext:Node>
</Children>
</ext:Node>
</Root>

<View>
<ext:TreeView runat="server">
<Plugins>
<ext:TreeViewDragDrop runat="server" EnableDrop="false" DragGroup="tree2div" />
</Plugins>
</ext:TreeView>
</View>
</ext:TreePanel>

<ext:Panel
runat="server"
Title="Designer"
Icon="Report"
Region="Center"
Margins="0">
<Content>
<div id="drop-header" style="border:1px silver solid;margin:20px;padding:8px;height:140px">
Drop Node Here
<div class="dynamicDiv" id="dd1-item1">Item 1.1</div>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

Thanks in advance,

Dominik.

Dominik
May 22, 2012, 1:34 PM
Hi again,

Well, I added a DragTracker control to the previous sample code as shown in examples explorer:

http://examples2.ext.net/#/DragDrop/Advanced/DragTracker/

In this way, it looks like this strange behaviour disappears.

Best regards,

Dominik.