PDA

View Full Version : [CLOSED] [MVC] Swap_Dropable with itemsFromPartial



Tactem
Oct 22, 2013, 8:55 AM
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/Swap_Dropable_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

Daniil
Oct 22, 2013, 1:35 PM
Hi @Tactem,

ItemsFromPartial puts the DropZone into the Viewport's Items. It is not correct.

Another thing is the fact that a DropZone should be created after rendering all the related stuff.

I can suggest the following solution.

@{
panel.Bin(
Html.X().DropZone()
.ID("DropZone1")
.TemplateWidget(true)
.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');")
);

panel.Listeners(events => events.AfterRender.Handler = "App.getDropZone1();");
}

Tactem
Oct 22, 2013, 1:49 PM
Hi daniil,

I tried this, but i had this error when listener is added :
TypeError: this.el is null

Regards

Daniil
Oct 22, 2013, 1:53 PM
What is Ext.NET version are you testing with?

Tactem
Oct 22, 2013, 2:02 PM
I have EXT.Net 2.2.0.23985

Daniil
Oct 22, 2013, 4:51 PM
Is it the official v2.2 release or some specific build from the trunk?

Could you update from the trunk and retest?

Tactem
Oct 23, 2013, 7:38 AM
I have the same problem with the last version of svn 2.3.1.1542

Daniil
Oct 23, 2013, 10:17 AM
Please provide a test case after applied modifications.

Tactem
Oct 23, 2013, 12:27 PM
this is the code after applied modification


@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")
)
)
.Listeners(events => events.AfterRender.Handler = "App.getDropZone1();");
panel.Bin(
Html.X().DropZone()
.ID("DropZone1")
.TemplateWidget(true)
.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');")
);
}

@{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');")

)*@

Daniil
Oct 23, 2013, 12:38 PM
Please add this for the DropZone:

.LazyMode(LazyMode.Config)

Tactem
Oct 23, 2013, 12:42 PM
Daniil, your are the best !!!