May 30, 2012, 9:26 AM
Draggable & Resizable items in Beta 2
Hi,
Updated with last Beta 2 version, it looks like a draggable and resizable item is not showing its corresponding size when the item is being resized.
When throw a tree node to create a new item dynamically, if code related with make it draggable (makeDraggable), then it works as expected.
Could this be a bug or it must be performed in some other way?
Here is my sample code:
Dominik.
Updated with last Beta 2 version, it looks like a draggable and resizable item is not showing its corresponding size when the item is being resized.
When throw a tree node to create a new item dynamically, if code related with make it draggable (makeDraggable), then it works as expected.
Could this be a bug or it must be performed in some other way?
Here is my 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;
}
.dynamicDiv {
width: 100px;
height: 20px;
border: 1px solid #a0a0a0;
background-color : white;
font-size: 11px;
font-family: verdana;
padding: 1px;
position: absolute;
cursor: move;
}
.dynamicDiv-proxy
{
font-size : 11px;
opacity : 0.4;
-moz-opacity : 0.4;
filter : alpha(opacity=40);
}
</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.metadata = data.records[0].get('data');
parentDiv.appendChild(divTag);
Ext.get(divTag).setLeftTop(e.getPageX() - parentDiv.getX(), e.getPageY() - parentDiv.getY());
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;
dd.afterDrag = afterDrag;
};
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();
};
var startDrag = function (x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
el.hide();
dragEl.applyStyles({ border: "solid gray 1px" });
dragEl.update(el.dom.innerHTML);
dragEl.addCls(el.dom.className + " dd-proxy");
};
var afterDrag = function () {
var el = Ext.get(this.getEl());
el.show();
if (App.DragArea)
App.DragArea.fireEvent("itemdrag", this);
};
</script>
</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" />
<AfterDrag Fn="afterDrag" />
</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>Dominik.
