PDA

View Full Version : [CLOSED] DropTarget Not working in razor syntax



machinableed
Apr 29, 2012, 3:49 PM
Hi there,

There seems to be some issues with DropTarget in razor syntax. When trying to instantiate it like so:


containers.Add(Html.X().DropTarget()
.Target("abcd"));


I get the following compilation error:
Argument 1: cannot convert from 'Ext.Net.DropTarget.Builder' to 'Ext.Net.AbstractComponent.Builder<Ext.Net.Container,Ext.Net.Container.Builder>'

Vladimir
Apr 29, 2012, 7:06 PM
Hi,

What is 'containers'?
Don't you have same issue in WebForm? Can you post how it looks in WebForm engine?

machinableed
Apr 30, 2012, 1:21 AM
I think I've solved my initial problem but I'm trying to basically replicate http://examples2.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/ in Razor syntax but I can't figure out how to do the page_load stuff:


<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
foreach (Container region in ViewPort1.Items)
{
Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];

p.DraggablePanelConfig = new DragSource
{
Group = "panelDD",
StartDrag =
{
Fn = "startDrag"
},

EndDrag =
{
Fn = "endDrag"
}
};
}
}
</script>

How can I achieve the above in razor syntax?

Daniil
Apr 30, 2012, 11:08 AM
Hi,

Please investigate the example.

The key points are:

1. Defining a variable

@{var viewport = Html.X().Viewport() ... }

2. ToComponent calling here:

@foreach (Container region in viewport.ToComponent().Items)

3. Rendering the viewport valirable.

@viewport

Example

<!DOCTYPE html>
@{
Layout = "";
}
<html>
<head>
<title>Ext.NET Razor Example</title>

<style type="text/css">
.invite {
background-color : #99bbe8 !important;
}

.x-drop-marker {
background-color : silver;
}
</style>

<script type="text/javascript">
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>
</head>
<body>
@Html.X().ResourceManager()
@{var viewport = Html.X().Viewport()
.Layout(LayoutType.Border)
.Items(itemsViewport =>
{
itemsViewport.Add(Html.X().Container()
.Region(Region.North)
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("10 10 5 10")
.Items(itemsNorth =>
itemsNorth.Add(Html.X().Panel()
.Cls("draggable")
.Title("North")
)
)
);
itemsViewport.Add(Html.X().Container()
.Region(Region.East)
.Cls("dropable")
.Layout(LayoutType.Fit)
.Width(200)
.Margins("5 10 5 10")
.Items(itemsEast =>
itemsEast.Add(Html.X().Panel()
.Cls("draggable")
.Title("East")
)
)
);
itemsViewport.Add(Html.X().Container()
.Region(Region.West)
.Cls("dropable")
.Layout(LayoutType.Fit)
.Width(200)
.Margins("5 10 5 10")
.Items(itemsWest =>
itemsWest.Add(Html.X().Panel()
.Cls("draggable")
.Title("West")
)
)
);
itemsViewport.Add(Html.X().Container()
.Region(Region.South)
.Cls("dropable")
.Layout(LayoutType.Fit)
.Height(100)
.Margins("5 10 10 10")
.Items(itemsSouth =>
itemsSouth.Add(Html.X().Panel()
.Cls("draggable")
.Title("South")
)
)
);
itemsViewport.Add(Html.X().Container()
.Region(Region.Center)
.Cls("dropable")
.Layout(LayoutType.Fit)
.Margins("5 0 5 0")
.Items(itemsCenter =>
itemsCenter.Add(Html.X().Panel()
.Cls("draggable")
.Title("Center")
.BodyPadding(5)
.Html("Drag/Drop Panel Headers to a different Viewport Region")
)
)
);
});
}

@foreach (Container region in viewport.ToComponent().Items)
{
Ext.Net.Panel p = (Ext.Net.Panel)region.Items[0];

p.DraggablePanelConfig = new DragSource
{
Group = "panelDD",
StartDrag =
{
Fn = "startDrag"
},

EndDrag =
{
Fn = "endDrag"
}
};
}

@viewport

@(Html.X().DropTarget()
.Target("${.dropable}")
.Group("panelDD")
.OverClass("invite")
.NotifyDrop(f =>
f.Fn = "notifyDrop"
)
.NotifyOut(f =>
f.Handler = "this.el.removeCls('invite');"
)
.NotifyOver(f =>
f.Handler = "Ext.select('.dropable').removeCls('invite'); this.el.addCls('invite');"
)
)
</body>
</html>