Draggable Panels with portals issue

  1. #1

    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



    <%@ 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.
  2. #2

    use validateDrop

    Hi all,

    I solved the issue using the following solution


    http://forums.ext.net/showthread.php?8346-CLOSED-1-0-Make-a-Portal-NOT-a-drop-target



    Thanks
    Nagamalli

Similar Threads

  1. Panels / Portals? Confused...
    By selimser in forum 1.x Help
    Replies: 3
    Last Post: Jun 24, 2011, 2:01 AM
  2. Replies: 1
    Last Post: Oct 25, 2010, 6:29 PM
  3. [CLOSED] [1.0] Portals and IE7
    By betamax in forum 1.x Premium Help
    Replies: 4
    Last Post: Sep 29, 2010, 5:02 PM
  4. Draggable Accordion Panels Easy?
    By cgountanis in forum 1.x Help
    Replies: 2
    Last Post: Dec 16, 2009, 11:48 AM
  5. Replies: 0
    Last Post: Oct 12, 2009, 5:13 AM

Tags for this Thread

Posting Permissions