Oct 22, 2013, 8:55 AM
[CLOSED] [MVC] Swap_Dropable with itemsFromPartial
Hi guys,
I have a view with a viewPort with a itemsFromPartial function.
In my second view i have this code : http://mvc.ext.net/#/DragDrop_Panel/...ropable_Panel/.
When i launch direct partial view, it works, but when i launch index, dropzone item doesn't work. It's possible to define panel var as drop panel.
Index.cshtml
I have a view with a viewPort with a itemsFromPartial function.
In my second view i have this code : http://mvc.ext.net/#/DragDrop_Panel/...ropable_Panel/.
When i launch direct partial view, it works, but when i launch index, dropzone item doesn't work. It's possible to define panel var as drop panel.
Index.cshtml
@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)
@(
Html.X().Viewport()
.Layout(LayoutType.Fit)
.ItemsFromPartial("ManagementView")
)
PartialView.cshtml@using Ext.Net;
@using Ext.Net.MVC;
@*@Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)*@
<style>
.invite {
background-color : #99bbe8 !important;
}
.x-drop-marker {
background-color : silver;
}
</style>
<script>
var notifyDrop = function (source, e, data) {
var targetCt = Ext.getCmp(this.el.dom.id),
targetPanel = targetCt.items.get(0),
sourceCt = data.panel.ownerCt;
sourceCt.add(targetPanel);
targetCt.add(data.panel);
Ext.defer(function () {
targetPanel.doLayout();
data.panel.doLayout();
}, 1);
};
var startDrag = function () {
Ext.select(".dropable").addCls("x-drop-marker");
Ext.select(".draggable").hide();
this.panelProxy.moveOnDrag = false;
};
var endDrag = function () {
Ext.select(".dropable").removeCls("x-drop-marker");
Ext.select(".draggable").show();
Ext.panel.DD.prototype.endDrag.apply(this, arguments);
};
</script>
@{var panel = Html.X().Panel()
.Layout(LayoutType.VBox)
.LayoutConfig(new VBoxLayoutConfig{Align= VBoxAlign.Stretch})
.Height(700)
.Width(1000)
.Items(
Html.X().Container()
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("10 10 10 10")
.Items(
Html.X().Panel()
.Cls("draggable")
.Title("North")
),
Html.X().Container()
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("10 10 10 10")
.Items(
Html.X().Panel()
.Cls("draggable")
.Title("East")
),
Html.X().Container()
.Cls("dropable")
.Height(100)
.Layout(LayoutType.Fit)
.Margins("10 10 10 10")
.Items(
Html.X().Panel()
.Cls("draggable")
.Title("Center")
.Html("Drag/Drop Panel Headers to a different Viewport Region")
.BodyPadding(5)
),
Html.X().Container()
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("10 10 10 10")
.Items(
Html.X().Panel()
.Cls("draggable")
.Title("South")
),
Html.X().Container()
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("10 10 10 10")
.Items(
Html.X().Panel()
.Cls("draggable")
.Title("West")
)
);
}
@{panel.ToComponent().Items.ForEach(item =>
{
var region = item as Container;
Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];
p.DraggablePanelConfig = new DragSource
{
Group = "panelDD",
StartDrag =
{
Fn = "startDrag"
},
EndDrag =
{
Fn = "endDrag"
}
};
});
}
@panel
@(Html.X().DropZone()
.Target("${.dropable}")
.Group("panelDD")
.OverClass("invite")
.NotifyDrop(nd => nd.Fn = "notifyDrop")
.NotifyOut(nout => nout.Handler = "this.el.removeCls('invite');")
.NotifyOver(nover => nover.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');")
)
Regards
Last edited by Daniil; Oct 23, 2013 at 12:45 PM.
Reason: [CLOSED]