May 29, 2013, 1:50 PM
Draggable Panels with portals issue
Hi All,
I am working on the following requirement, which is, To create dynamic draggable and resizable panels and those panels contains portlets.
For this I have implemented the following code, but I got few issues in this code, Please help me to solve the issues
The issues are
1. Is it possible to restrict the portlet to move from one portal to other, if so how can we do that?
2. In the code below I have two panels, Do we restrict the panel to drag and drop over the other panel ?(Means the panel can be draggable in the portlet area of the second panel)
3. While dragging the panel some times I am unable to drop it at any position in the screen, why it is behaving like that?
Here is the code
=====================
And the usercontrol code is
=====================
Thank you
Nagamalli
I am working on the following requirement, which is, To create dynamic draggable and resizable panels and those panels contains portlets.
For this I have implemented the following code, but I got few issues in this code, Please help me to solve the issues
The issues are
1. Is it possible to restrict the portlet to move from one portal to other, if so how can we do that?
2. In the code below I have two panels, Do we restrict the panel to drag and drop over the other panel ?(Means the panel can be draggable in the portlet area of the second panel)
3. While dragging the panel some times I am unable to drop it at any position in the screen, why it is behaving like that?
Here is the code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DragNew.aspx.cs" Inherits="ext1._3Appliction.NewFolder1.DragNew" %>
<%@ Register Src="~/UserControls/userDesigner.ascx" TagPrefix="ucDesign" TagName="DesignUser" %>
<script runat="server">
protected override void OnInit(EventArgs e)
{
PrepareUserLayout();
}
private void PrepareUserLayout()
{
int winHeight = 600, winWidth = 950, positionX = 10, positionY = 10, secWidth = 100, secHeight = 200;
for (int i = 0; i < 2; i++)
{
ext1._3Appliction.UserControls.userDesigner userEv = (ext1._3Appliction.UserControls.userDesigner)this.LoadControl("~/UserControls/userDesigner.ascx");
userEv.ID = "userAdd_" + i;
//userEv.LoadData(new System.IO.StringWriter());
Ext.Net.Panel pnlSection = new Ext.Net.Panel();
pnlSection.ID = "sectionPanel_" + i;
pnlSection.ContentContainer.Controls.Add(userEv);
pnlSection.Header = true;
pnlSection.Collapsible = true;
pnlSection.Icon = Ext.Net.Icon.Package;
pnlSection.Title = "Panel_" + i;
pnlSection.Border = true;
pnlSection.ForceLayout = true;
pnlSection.AutoScroll = true;
pnlSection.Cls = "SectionPanel";
pnlSection.Height = secHeight;
pnlSection.Width = winWidth - 100;
pnlSection.X = 20;
pnlSection.Y = positionY;
positionY += secHeight + 20;
pnlSection.Draggable = true;
pnlSection.Floating = true;
pnlSection.DraggableConfig.OnDrag.Fn = "onDrag";
pnlSection.DraggableConfig.EndDrag.Fn = "endDrag";
this.Page.Controls.Add(pnlSection);
//to resize the panel
Ext.Net.Resizable resizable = new Ext.Net.Resizable();
resizable.ID = "resizable_" + i;
resizable.Element = "={" + pnlSection.ClientID + ".el}";
resizable.Transparent = true;
resizable.EnabledResizing = true;
resizable.Handles = ResizeHandle.All;
resizable.Listeners.Resize.Handler = "var p = " + pnlSection.ClientID + "; p.el.setStyle({width:'', height:''});p.setSize(width, height);p.doLayout();";
resizable.Render();
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.SectionPanel
{
z-index: 11;
}
</style>
<script type="text/javascript">
var onDrag = function(e) {
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
};
var endDrag = function(e) {
this.panel.setPosition(this.x, this.y);
};
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="rmgr1" runat="server">
</ext:ResourceManager>
</form>
</body>
</html>
=====================
And the usercontrol code is
=====================
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="userDesigner.ascx.cs"
Inherits="ext1._3Appliction.UserControls.userDesigner" %>
<ext:BorderLayout ID="clSectionEvaluator" runat="server" Margin="100">
<Items>
<ext:Panel ID="pnlColumn1" runat="server" Region="Center" Frame="false" Layout="FitLayout"
Border="false">
<Items>
<ext:Portal ID="Portal1" runat="server" Border="false" Layout="Column">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" Cls="x-column-padding" ColumnWidth=".49"
Layout="Anchor">
<Items>
<ext:Portlet ID="Portlet1" runat="server" Title="Another Panel 1" Icon="Accept">
<Content>
<ext:TextArea ID="txtAddress" runat="server" Width="300" Height="100" FieldLabel="Address">
</ext:TextArea>
</Content>
</ext:Portlet>
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="PortalColumn2" runat="server" Cls="x-column-padding" ColumnWidth=".49"
Layout="Anchor">
<Items>
<ext:Portlet ID="Portlet2" runat="server" Title="Panel 2">
<Items>
<ext:TextArea ID="txtComments" runat="server" Width="300" Height="100" FieldLabel="Comments">
</ext:TextArea>
</Items>
</ext:Portlet>
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</Items>
</ext:Panel>
</Items>
</ext:BorderLayout>
Thank you
Nagamalli
Last edited by nagamalli; May 30, 2013 at 10:48 AM.