Aug 22, 2013, 2:10 PM
Draggable panels
Hi team,
We are working on Drag and drop panels in a window
Please go through the following code,
To give you runnable code we have simplified these pages
=========windowsample.aspx======================== ==
issue is as follows
Run the code--> click on load button
scroll to end in window and try to drag the second panel to its left or right,
When we are dragging it, the panel is not placed in the desired position(it is moving to top),
How can we solve this problem?
And how can we stop shadow and dotted lines of the panel while dragging(see the attached screenshots)
Please contact if you need more explanation
Thank you
Nagamalli.
We are working on Drag and drop panels in a window
Please go through the following code,
To give you runnable code we have simplified these pages
=========windowsample.aspx======================== ==
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WindowSample.aspx.cs" Inherits="ext1._3Appliction.NewFolder1.WindowSample" %>
<!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>Drag Page</title>
<script runat="server">
protected void btnLoadView_OnEvent(object sender, DirectEventArgs e)
{
wndView.AutoScroll = true;
wndView.LoadContent("../NewFolder1/DesignDrag.aspx", false);
wndView.Show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="wndView" runat="server" Hidden="true" CloseAction="Hide" Layout="FitLayout"
Width="1000" Height="800" AutoScroll="true" Title="Form Details" Frame="true"
Modal="true" ButtonAlign="Center" Resizable="true">
</ext:Window>
<ext:Button ID="btnLoadView" runat="server" Height="100" Width="100" Text="Load">
<DirectEvents>
<Click OnEvent="btnLoadView_OnEvent">
</Click>
</DirectEvents>
</ext:Button>
</form>
</body>
</html><%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="ext1._3Appliction.NewFolder1.Site1" %>
<!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>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="extScriptManager" runat="server" />
<ext:Viewport ID="vpMaster" runat="server">
<Content>
<asp:ContentPlaceHolder ID="PageCotent" runat="server">
</asp:ContentPlaceHolder>
</Content>
</ext:Viewport>
</form>
</body>
</html><%@ Page Language="C#" MasterPageFile="~/NewFolder1/Site1.Master" AutoEventWireup="true"
CodeBehind="DesignDrag.aspx.cs" Inherits="ext1._3Appliction.NewFolder1.DesignDrag"
Title="Untitled Page" %>
<%@ Register Src="~/UserControls/userDesigner.ascx" TagPrefix="ucDesign" TagName="DesignUser" %>
<script runat="server">
protected override void OnInit(EventArgs e)
{
PrepareUserLayout();
}
private void PrepareUserLayout()
{
int winHeight = 800, winWidth = 700, positionX = 10, positionY = 10, secWidth = 700, secHeight = 550;
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;
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";
pnlSection.AddTo(pnlFormViewer);
//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>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<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>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PageCotent" runat="server">
<ext:BorderLayout ID="blFormViewer" runat="server">
<Center>
<ext:Panel ID="pnlFormViewer" runat="server" AutoScroll="true" Border="false" BodyBorder="false"
StyleSpec="padding:3px;background-color:white;" BodyStyle="padding-right:10px;"
ButtonAlign="Right">
</ext:Panel>
</Center>
</ext:BorderLayout>
</asp:Content><%@ 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" Height="200" Frame="false"
Border="false">
<Items>
<ext:TextArea ID="txtAddress" runat="server" Width="300" Height="100" FieldLabel="Address">
</ext:TextArea>
</Items>
</ext:Panel>
</Items>
</ext:BorderLayout>issue is as follows
Run the code--> click on load button
scroll to end in window and try to drag the second panel to its left or right,
When we are dragging it, the panel is not placed in the desired position(it is moving to top),
How can we solve this problem?
And how can we stop shadow and dotted lines of the panel while dragging(see the attached screenshots)
Please contact if you need more explanation
Thank you
Nagamalli.
