Sep 06, 2016, 10:25 AM
[CLOSED] Drag and drop broken from 2.5 to 4.1
Still waiting for the Premium activation. Please move this thread to the 4.x Premium Help.
The sample below works in EXT.NET 2.5, but not in 4.1.
The sample below works in EXT.NET 2.5, but not in 4.1.
<head runat="server">
<title></title>
<script type="text/javascript">
function InitializeImportDrop(v)
{
var gridView = v,
grid = gridView.up('gridpanel');
grid.dropZone = Ext.create('Ext.dd.DropZone', v.el, {
getTargetFromEvent: function (e)
{
return e.getTarget('.import-target');
},
onNodeEnter: function (target, dd, e, data)
{
Ext.fly(target).addCls('import-target-hover');
},
onNodeOut: function (target, dd, e, data)
{
Ext.fly(target).removeCls('import-target-hover');
},
onNodeOver: function (target, dd, e, data)
{
return Ext.dd.DropZone.prototype.dropAllowed;
},
onNodeDrop: function (target, dd, e, data)
{
var rowBody = Ext.fly(target).findParent('.x-grid-row', null, false),
h = gridView.getRecord(rowBody),
targetEl = Ext.get(target);
h.set('Source', data.sourceData.Description);
h.set('SourceOrder', data.sourceData.Order);
h.commit();
targetEl.update(data.sourceData.Description);
return true;
}
});
}
function InitializeSourceDrag(v)
{
v.dragZone = Ext.create('Ext.dd.DragZone', v.getEl(), {
getDragData: function (e)
{
var sourceEl = e.getTarget(v.itemSelector, 10), d;
if (sourceEl)
{
d = sourceEl.cloneNode(true);
d.id = Ext.id();
return v.dragData = {
sourceEl: sourceEl,
repairXY: Ext.fly(sourceEl).getXY(),
ddel: d,
sourceData: v.getRecord(sourceEl).data
};
}
},
onInitDrag: function (e)
{
this.dragData.ddel.innerHTML = this.dragData.sourceData.Description;
this.proxy.update(this.dragData.ddel);
},
getRepairXY: function ()
{
return this.dragData.repairXY;
}
});
}
function ClearLinks(v)
{
var store = v.getStore();
store.each(function (rec) { rec.set('Source', ''); rec.set('SourceOrder', -1); rec.commit(); });
}
var setExtraOptionsState = function (grid, command, record, row)
{
if (record.data.HasExtraOptions == false)
{
command.hidden = true;
}
}
</script>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.storeImportFields.DataSource = this.Data;
this.storeImportFields.DataBind();
this.storeSourceFields.DataSource = this.Data2;
this.storeSourceFields.DataBind();
}
}
private object[] Data
{
get
{
return new object[]
{
new object[] { 1, "3m Co", false, "", -1 },
new object[] { 2, "Alcoa Inc", false, "", -1 },
new object[] { 3, "Altria Group Inc", false, "", -1 },
new object[] { 4, "American Express Company", false, "", -1 }
};
}
}
private object[] Data2
{
get
{
return new object[]
{
new object[] { 0, "Books" },
new object[] { 1, "DVDs" },
new object[] { 2, "Cars" }
};
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager runat="server" ID="testRM" />
<ext:Viewport runat="server" ID="viewPort1" Layout="BorderLayout">
<Items>
<ext:Panel runat="server" ID="panelLink" Layout="HBoxLayout" Width="1200" Title="Link fields">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Stretch"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:GridPanel ID="gridImportFields" runat="server" Height="600" Width="500" Padding="5" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false" SortableColumns="false">
<Store>
<ext:Store ID="storeImportFields" runat="server">
<Model>
<ext:Model ID="modelImportFields" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int"></ext:ModelField>
<ext:ModelField Name="Description" Type="String"></ext:ModelField>
<ext:ModelField Name="HasExtraOptions" Type="Boolean"></ext:ModelField>
<ext:ModelField Name="Source" Type="String"></ext:ModelField>
<ext:ModelField Name="SourceOrder" Type="Int"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="columnImportID" runat="server" DataIndex="ID" Hidden="true"></ext:Column>
<ext:Column ID="columnImportDescription" runat="server" Text="Import field" DataIndex="Description" Flex="1"></ext:Column>
<ext:Column ID="columnImportSource" runat="server" Text="Source field" DataIndex="Source" Flex="1" TdCls="import-target"></ext:Column>
<ext:Column ID="columnImportSourceOrder" runat="server" DataIndex="SourceOrder" Hidden="true"></ext:Column>
<ext:ImageCommandColumn ID="columnExtraOptions" runat="server" Width="25px">
<PrepareCommand Fn="setExtraOptionsState"></PrepareCommand>
<Commands>
<ext:ImageCommand CommandName="ShowExtraOptions" Icon="ApplicationEdit"></ext:ImageCommand>
</Commands>
<Listeners>
<Command Handler="App.direct.ShowWindow( record.data.ID);"></Command>
</Listeners>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" ID="gridViewImportFields" LoadMask="false">
<Listeners>
<Render Handler="InitializeImportDrop(this);"></Render>
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
<ext:Panel runat="server" ID="panelClear" Layout="HBoxLayout" Border="false">
<LayoutConfig>
<ext:HBoxLayoutConfig Align="Middle" Pack="Center"></ext:HBoxLayoutConfig>
</LayoutConfig>
<Items>
<ext:Button ID="btnClearLinks" runat="server" Text="Clear">
<Listeners>
<Click Handler="ClearLinks(#{gridImportFields});"></Click>
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:GridPanel ID="gridSourceFields" runat="server" Height="600" Width="500" Padding="5" EnableColumnHide="false" EnableColumnMove="false" EnableColumnResize="false">
<Store>
<ext:Store ID="storeSourceFields" runat="server">
<Model>
<ext:Model ID="modelSourceFields" runat="server" IDProperty="Order">
<Fields>
<ext:ModelField Name="Order" Type="Int"></ext:ModelField>
<ext:ModelField Name="Description" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="columnSourceOrder" runat="server" DataIndex="Order" Hidden="true"></ext:Column>
<ext:Column ID="columnSourceDescription" runat="server" DataIndex="Description" Flex="1"></ext:Column>
</Columns>
</ColumnModel>
<View>
<ext:GridView runat="server" ID="gridViewSourceFields" LoadMask="false" ItemCls="import-source">
<Listeners>
<Render Handler="InitializeSourceDrag(this);"></Render>
</Listeners>
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
</form>
</body>
</html>
Last edited by fabricio.murta; Sep 09, 2016 at 5:23 PM.