What's New?

[CLOSED] How to create via Ext.js a draggable panel?

  1. #1
    Oct 10, 2012, 3:29 PM

    [CLOSED] How to create via Ext.js a draggable panel?

    Hi,
    I can't to create a draggable panel via javascritp. See my sample.
    Thank you.
    Jimmy

    <%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<!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></title>


    <script language="javascript" type="text/javascript">


      var crateDragPanel = function () {


        var newPanel = new Ext.Panel(
        {
          border: true,
          frame: true,
          width: 200,
          title: "prova",
          draggable:
          {
            insertProxy: false,
            endDrag: endDragF 
          }
        });


        newPanel.setPosition(100, 100);


        App.test.items.add(newPanel);


        App.test.doLayout();


      }


      var endDragF = function (e) {


        Ext.panel.DD.prototype.endDrag.apply(this, arguments);
      }
    
    </script>


    


</head>
<body style="background-color: Aqua">
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />


      <ext:Button ID="btnNewPanel" runat="server" Text="Add Panel">
        <Listeners>
          <Click Handler="crateDragPanel();"></Click>
        </Listeners>
      </ext:Button>


      <ext:TabPanel ID="tabPnl" Plain="true" TabPosition="Top" runat="server" Border="false" Height="500">
        <Items>
          <ext:Panel ID="test" runat="server" Border="false" Title="pluto" Closable="true" X="0" Y="0" >
            
          </ext:Panel>
        </Items>
      </ext:TabPanel>
    </form>
</body>
</html>
    Last edited by Daniil; Oct 11, 2012 at 4:43 PM. Reason: [CLOSED]
  2. #2
    Oct 10, 2012, 5:09 PM
    Hi Jimmy,

    Can you get a required Panel in markup?

    If so, the simplest way for you is here:
    http://forums.ext.net/showthread.php...ll=1#post89172
  3. #3
    Oct 11, 2012, 8:32 AM
    Hi Daniil,
    I have followed your instructions and I have corrected the code, so I have discovered a problem.
    See the new sample:

    <%@ Page Language="C#" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
      Ext.Net.Panel pnl = null;


      TableLayoutConfig tlayC = new TableLayoutConfig();


      pnl = new Ext.Net.Panel();


      pnl.Icon = Ext.Net.Icon.TextAb;
      pnl.Title = "Pnl From Server";


      pnl.Border = true;


      pnl.ID = "pnlFromServer1";
      
      pnl.Frame = true;
      pnl.X = 10;
      pnl.Y = 20;


      pnl.Width = 200;


      pnl.Draggable = true;


      pnl.DraggablePanelConfig = new DragSource();
      pnl.DraggablePanelConfig.OnDrag.Fn = "onDragF";
      pnl.DraggablePanelConfig.EndDrag.Fn = "endDragF";


      tlayC = new TableLayoutConfig();
      tlayC.Columns = 1;
      pnl.LayoutConfig.Add(tlayC);
      pnl.Layout = "TableLayout";


      this.test.Items.Add(pnl);
      
    }
</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></title>


    <script language="javascript" type="text/javascript">


      var crateDragPanel = function () {


        var newPanel = new Ext.Panel(
        {
          id: "pnlFromClient1",
          border: true,
          frame: true,
          width: 200,
          x: 60,
          y: 100,
          draggable: {
            endDrag: endDragF,
            onDrag: onDragF
          },
          layout: {
            type: "table",
            columns: 1
          },
          title: "Pnl From Client",
          iconCls: "#TextAb"
        });


        newPanel.setPosition(100, 100);


        App.test.items.add(newPanel);


        App.test.doLayout();


      }


      var onDragF = function (e) {
        var pel = this.proxy.getEl();


        var xPos = pel.getLeft(true);
        var yPos = pel.getTop(true);


        var s = this.panel.getEl().shadow;


        if (s && this.x != null && this.y != null) {
          s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
        }
      }


      var endDragF = function (e) {


        if (this.lastPageX != null && this.lastPageY != null) {
          this.panel.setPosition((this.lastPageX - 205), (this.lastPageY - 36));
          this.panel.el.setStyle("opacity", this.panel.opacityXeo);
        }


        Ext.panel.DD.prototype.endDrag.apply(this, arguments);
      }


    
    </script>


    


</head>
<body style="background-color: Aqua">
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ResourceManager1" runat="server" />


      <ext:Button ID="btnNewPanel" runat="server" Text="Add Panel">
        <Listeners>
          <Click Handler="crateDragPanel();"></Click>
        </Listeners>
      </ext:Button>


      <ext:TabPanel ID="tabPnl" Plain="true" TabPosition="Top" runat="server" Border="false" Height="500">
        <DefaultTabMenu>
          <ext:Menu ID="mnTab" runat="server" EnableScrolling="false" RenderToForm="true">
            <Items>
              <ext:Label ID="Label1" runat="server" StyleSpec="font-weight:bold;padding-left:30px;"/>   
            </Items>
          </ext:Menu>
        </DefaultTabMenu>
        <Items>
          <ext:Panel ID="test" runat="server" Border="false" Title="pluto" X="0" Y="0" Closable="true" BodyPadding="6" >
            
          </ext:Panel>
        </Items>
      </ext:TabPanel>
    </form>
</body>
</html>
    On this sample when I add the new panel "pnlFromClient1" it is draggable, but if I don't add the panel "pnlFromServer1" from codebehind the panel "pnlFromClient1" is not draggable.
    Test commentig the row in PageLoad: 

       pnl.Layout = "TableLayout";


      //this.test.Items.Add(pnl);
      
    }
    Thank you

    Jimmy
  4. #4
    Oct 11, 2012, 11:21 AM
    Please replace
    App.test.items.add(newPanel);
    with
    App.test.add(newPanel);
  5. #5
    Oct 11, 2012, 1:20 PM
    Hi Daniil,
    ok, it works fine.
    Thank you very much.

    Jimmy

Similar Threads

  1. [CLOSED] How to create Panel Loader programmatically
    By Daly_AF in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 06, 2012, 10:50 AM
  2. [Razor] Unable to create Portal panel
    By vs.mukesh in forum 2.x Help
    Replies: 2
    Last Post: May 09, 2012, 10:54 AM
  3. Create dynamic selectables, resizable and draggable labels
    By Dominik in forum 1.x Help
    Replies: 7
    Last Post: Mar 21, 2012, 2:13 PM
  4. Create Grid Panel Editor in Code Behind
    By mkshields9w57 in forum 1.x Help
    Replies: 2
    Last Post: Aug 11, 2011, 3:27 PM

Posting Permissions