Sep 17, 2015, 11:53 AM
[CLOSED] Drag and Drop from Combobox to TreeGrid
Hi,
it is possible to drag and drop a combobox value into a treePanel?
i dont want to write some custom logic, i want to use the existing plugins.
the dd from Combobox to Content Panel is OK, but not from Combobox to Tree.
best regards
I.
it is possible to drag and drop a combobox value into a treePanel?
i dont want to write some custom logic, i want to use the existing plugins.
the dd from Combobox to Content Panel is OK, but not from Combobox to Tree.
best regards
I.
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Konsortialprojekt - Ext.NET</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script runat="server">
private object TestDataComboBox
{
get
{
return new object[]
{
new object[] { "1", "Alabama", "The Heart of Dixie" },
new object[] { "2", "Alaska", "The Land of the Midnight Sun" },
new object[] { "3", "Arizona", "The Grand Canyon State" },
new object[] { "4", "Arkansas", "The Natural State" },
new object[] { "5", "California", "The Golden State" },
};
}
}
</script>
<script>
var notifyDrop = function (dd, e, data) {
var msg = [];
msg.push("<p><b>Node</b></p><ul>");
msg.push("<li>id : " + data.item.id + "</li>");
msg.push("</ul>");
Ext.get("drop-target").update(msg.join(""))
return true;
};
var getDragData = function (e) {
if (!this.ddel) {
this.ddel = document.createElement('div');
}
var target = Ext.get(e.getTarget());
// Check Target is really a search-item
if (!target.hasCls('search-item')) {
target = target.up("[class='search-item']");
if (target == null || !target.hasCls('search-item')) {
return false;
}
}
return {ddel:this.ddel, item:target};
};
var onInitDrag = function (e) {
this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
this.ddel.className = this.dragData.item.dom.className;
this.ddel.style.width = this.dragData.item.getWidth() + "px";
this.proxy.update(this.ddel);
};
var getRepairXY = function (e, data) {
data.item.highlight('#E8EDFF');
return data.item.getXY();
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:DragZone runat="server" Target="={#{SupplierListConfig}.getEl()}" Group="SupplierSearchResult2Tree">
<GetDragData Fn="getDragData" />
<OnInitDrag Fn="onInitDrag" />
<GetRepairXY Fn="getRepairXY" />
</ext:DragZone>
<ext:DropTarget runat="server" Target="drop-target" Group="SupplierSearchResult2Tree">
<NotifyDrop Fn="notifyDrop" />
</ext:DropTarget>
<ext:Panel
runat="server"
Width="1024"
Height="800"
Layout="Border">
<Items>
<ext:TreePanel
runat="server"
Region="West"
Split="true"
MarginSpec="5 0 5 5"
Width="350"
Title="Projects"
AutoScroll="true"
Collapsible="true"
RootVisible="false">
<Root>
<ext:Node Text="Composers" Expanded="true">
<Children>
<ext:Node Text="Beethoven" Icon="UserGray" Expanded="true">
<Children>
<ext:Node Text="Concertos" Expanded="true">
<Children>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" AllowDrop="true" />
<ext:Node Text="No. 2 - B-Flat Major" Icon="Music" Leaf="true" AllowDrop="true" />
<ext:Node Text="No. 3 - C Minor" Icon="Music" Leaf="true" AllowDrop="true" />
<ext:Node Text="No. 4 - G Major" Icon="Music" Leaf="true" AllowDrop="true" />
<ext:Node Text="No. 5 - E-Flat Major" Icon="Music" Leaf="true" AllowDrop="true" />
</Children>
</ext:Node>
<Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
<View>
<ext:TreeView ID="ProjectTreeView" runat="server">
<Plugins>
<ext:TreeViewDragDrop runat="server" DropGroup="SupplierSearchResult2Tree" AllowLeafDrop="true"/>
</Plugins>
</ext:TreeView>
</View>
</ext:TreePanel>
<ext:Panel
runat="server"
Region="Center"
Layout="Border"
MarginSpec="0 5 5 0">
<Items>
<ext:Panel
runat="server"
Title="Music"
Region="North"
Layout="AnchorLayout"
MarginSpec="5 0 0 0">
<Content>
<ext:ComboBox
runat="server"
DisplayField="_DISPLAY"
ValueField="_OBJID"
TypeAhead="false"
PageSize="25"
HideTrigger="true"
MinChars="0"
TriggerAction="Query"
AnchorHorizontal="100%"
MarginSpec="5 5 5 5"
Draggable="true">
<ListConfig
LoadingText="Searching..."
ID="SupplierListConfig">
<ItemTpl runat="server">
<Html>
<div class="search-item" id="{_OBJID}" style="border: 1px dashed silver; padding: 5px 5px 5px 5px; border-radius: 5px;">
<b><span>{_DISPLAY}</span></b><br />
{Anzeige}
</div>
</Html>
</ItemTpl>
</ListConfig>
<Store>
<ext:Store runat="server" Data="<%# TestDataComboBox %>" AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="_OBJID" />
<ext:ModelField Name="_DISPLAY" />
<ext:ModelField Name="Anzeige" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
</ext:ComboBox>
</Content>
</ext:Panel>
<ext:Panel
runat="server"
Title="Properties"
Region="South"
Split="true"
AutoScroll="true"
MarginSpec="5 0 0 0"
height="300px">
<Content>
<div id="drop-target" style="border: 1px silver solid; margin: 20px; padding: 8px; height: 140px">
This works, TreePanel dont!
</div>
</Content>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</form>
</body>
</html>
Last edited by Daniil; Sep 29, 2015 at 5:41 PM.
Reason: [CLOSED]