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>
