[CLOSED] Limit x y drag on Ext.NET 2.x

**xeo4.it** · May 07, 2013, 3:50 PM

Hi,
I don't succeed in limiting the drag, the following code works fine in Ex.NET 1

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


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


  if (xPos >= 205 && xPos < 1000)
    this.x = xPos;


  if (yPos >= 36 && yPos < 800) 
    this.y = yPos;
}

in ext.net 2.x the this.x and this.y don't exist anymore.

Please help me.

Thank you.

Jimmy

**Daniil** · May 07, 2013, 4:15 PM

Hi @Jimmy,

Could you, please, provide a full test case to test with?

By the way, maybe, you could use the constrainTo option.
http://docs.sencha.com/extjs/4.2.0/#...fg-constrainTo

**xeo4.it** · May 09, 2013, 10:00 AM

Hi Daniil,
I have used constrainTo but it works fine in IE while in Chrome and Firefox the drag limits of the panel are moved on bottom and right.
See my example.

Thank you

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>


  <script type="text/javascript">


    var startDragF = function (x, y) {


      this.constrainTo(App.pnlContainer.getId());


    }


  </script>


</head>
  <body>
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ScriptManager1" runat="server" >
      </ext:ResourceManager>


      <ext:Panel 
        ID="pnlContainer" 
        runat="server" 
        Width="800"
        Height="600"
        StyleSpec="margin-top: 20px; margin-left: 20px;"
        >
        <Items>
          <ext:Panel
            ID="pnlTest"
            runat="server"
            Draggable="true"
            X="200"
            Y="200"
            Title="Test"
            Width="70"
            >
            <Content>
              <table>
                <tr>
                  <td>
                    aaaa bbbb cccc dddd
                  </td>
                </tr>
              </table>
            </Content>
            
            <DraggablePanelConfig runat="server">
              <StartDrag Fn="startDragF" />
            </DraggablePanelConfig>
          </ext:Panel>
        </Items>


      </ext:Panel>


    </form>
  </body>
</html>

**Daniil** · May 09, 2013, 12:36 PM

I am not sure, but it can be wrong to constrain in a StartDrag listener.

In any way, I recommend to use the SimpleDrag property.

Example

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>
</head>
<body>
    <form  runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Panel
            runat="server"
            Width="800"
            Height="600"
            StyleSpec="margin-top: 20px; margin-left: 20px;">
            <Items>
                <ext:Panel
                    ID="Panel1"
                    runat="server"
                    Title="Test"
                    Width="70"
                    X="200"
                    Y="200"
                    Floating="true"
                    Draggable="true"
                    Constrain="true"
                    SimpleDrag="true"
                    Html="Drag Me" />
            </Items>
            <Listeners>
                <AfterRender Handler="this.floatingItems.get(0).show();" Delay="1" />
            </Listeners>
        </ext:Panel>
    </form>
</body>
</html>

**xeo4.it** · May 10, 2013, 9:13 AM

Hi Daniil,
I must use a complex drag, I need to change the html of drag element.
However I have resolved, see my following example, if I set manually the minX, maxX, minY and maxY of the dd element of the drag panel, after activation of constraintTo, the drag works fine in all browser.
I think that it is a bug in the calculation of minX, maxX, minY and maxY in constraintTo.

Jimmy

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
 
 
  <script type="text/javascript">


    var startDragF = function (x, y) {


      this.constrainTo(App.pnlContainer.getId());


      this.minX = 20;
      this.maxX = 750;
      this.minY = 20;
      this.maxY = 560;


    }


  </script>
  
</head>
  <body>
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ScriptManager1" runat="server" >
      </ext:ResourceManager>
 
 
      <ext:Panel
        ID="pnlContainer"
        runat="server"
        Width="800"
        Height="600"
        StyleSpec="margin-top: 20px; margin-left: 20px;"
        >
        <Items>
          <ext:Panel
            ID="pnlTest"
            runat="server"
            Draggable="true"
            X="200"
            Y="200"
            Title="Test"
            Width="70"
            Height="60"
            >
            <Content>
              <table>
                <tr>
                  <td>
                    aaaa bbbb cccc dddd
                  </td>
                </tr>
              </table>
            </Content>
             
            <DraggablePanelConfig ID="DraggablePanelConfig1" runat="server">
              <StartDrag Fn="startDragF" />
            </DraggablePanelConfig>
          </ext:Panel>
        </Items>
      </ext:Panel>
    </form>
  </body>
</html>

**Daniil** · May 10, 2013, 10:49 AM

Ok, but I still think it is incorrectly to constrain in a StartDrag listener.

If constrain, for example, on Button click, it appears to be working well.

Do you really need to constrain within a StartDrag listener? What is your scenario?

**xeo4.it** · May 13, 2013, 9:49 AM

Hi Daniil,
my container panel can change size via a combo, the constrainTo doesn't work fine when I change the container panel size, so I need to set the minX, maxX, minY and maxY every time I change the container panel size. I have tried to do it in the StartDrag that in the select listener of combo, but the only solution is to set minX, maxX, minY and maxY. I have tried alse to use setX/YConstraint but they work only if I reassign the initPageX/Y, see my code.
I call this function every time I change the container panel size.

Jimmy

var setConstraintPanel = function (panel, width, height) {


  var xConstrL = 0;
  var xConstrR = 0;
  var yConstrT = 0;
  var yConstrB = 0;


  if (panel.dd) {


    xConstrL = panel.x;
    xConstrR = width - xConstrL - panel.getWidth();


    panel.dd.initPageX = panel.dd.lastPageX;


    panel.dd.setXConstraint(xConstrL, xConstrR);


    yConstrT = panel.y;
    yConstrB = height - panel.y - panel.getHeight();


    panel.dd.initPageY = panel.dd.lastPageY;


    panel.dd.setYConstraint(yConstrT, yConstrB);
  }


}

**Daniil** · May 13, 2013, 3:56 PM

in the select listener of combo

If you could provide a sample to reproduce, we would be happy to investigate.

**xeo4.it** · May 14, 2013, 9:54 AM

Hi Daniil,
here is the example, if you uncomment 'panel.dd.initPageX = panel.dd.lastPageX;' and 'panel.dd.initPageY = panel.dd.lastPageY;' it works fine.

Jimmy

<%@ Page Language="C#" %>
  
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
 
  <script runat="server">
  
    protected void Page_Load(object sender, EventArgs e)
    {


      if (!Page.IsPostBack && !X.IsAjaxRequest)
      {
        this._loadSbSize();
      }
      
    }


    private void _loadSbSize()
    {
      Ext.Net.ListItem li = null;


      li = new Ext.Net.ListItem();
      li.Text = "640 X 480";
      li.Value = "640X480";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "800 X 600";
      li.Value = "800X600";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1024 X 600";
      li.Value = "1024X600";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1024 X 768";
      li.Value = "1024X768";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1366 X 768";
      li.Value = "1366X768";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1280 X 600";
      li.Value = "1280X600";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1280 X 800";
      li.Value = "1280X800";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1280 X 960";
      li.Value = "1280X960";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1280 X 1024";
      li.Value = "1280X1024";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1600 X 1200";
      li.Value = "1600X1200";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1920 X 1080";
      li.Value = "1920X1080";
      this.sbSize.Items.Add(li);


      li = new Ext.Net.ListItem();
      li.Text = "1920 X 1200";
      li.Value = "1920X1200";
      this.sbSize.Items.Add(li);


      this.sbSize.Select(0);
      this.sbSize.SelectedItem.Value = "640X480";


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


    var sbSize_select = function (combo, records, eOpts) {


      var size = records[0].data.field1.split('X');
      var newWidth = size[0] * 1;
      var newHeight = size[1] * 1;


      App.pnlContainer.setWidth(newWidth);
      App.pnlContainer.setHeight(newHeight);


      setConstraintPanel(App.pnlTest, newWidth, newHeight);


    }


    var docReady = function () {


      setConstraintPanel(App.pnlTest, 640, 480);


    }


    var setConstraintPanel = function (panel, width, height) {


      var xConstrL = 0;
      var xConstrR = 0;
      var yConstrT = 0;
      var yConstrB = 0;


      if (panel.dd) {


        xConstrL = panel.x;
        xConstrR = width - xConstrL - panel.getWidth();


        //panel.dd.initPageX = panel.dd.lastPageX;


        panel.dd.setXConstraint(xConstrL, xConstrR);


        yConstrT = panel.y;
        yConstrB = height - panel.y - panel.getHeight();


        //panel.dd.initPageY = panel.dd.lastPageY;


        panel.dd.setYConstraint(yConstrT, yConstrB);
      }


    }


  </script>
  
</head>
  <body>
    <form id="form1" runat="server">
      <ext:ResourceManager ID="ScriptManager1" runat="server" >
        <Listeners>
          <DocumentReady Handler="docReady();"></DocumentReady>
        </Listeners>
      </ext:ResourceManager>
 
      <ext:SelectBox ID="sbSize" runat="server" Width="113" Draggable="false" StyleSpec="margin-top: 20px; margin-left: 20px;" >
        <Listeners>
          <Select Fn="sbSize_select" />
        </Listeners>
      </ext:SelectBox> 


      <ext:Panel
        ID="pnlContainer"
        runat="server"
        Width="640"
        Height="480"
        StyleSpec="margin-top: 20px; margin-left: 20px;"
        >
        <Items>
          <ext:Panel
            ID="pnlTest"
            runat="server"
            Draggable="true"
            X="200"
            Y="200"
            Title="Test"
            Width="70"
            Height="60"
            >
            <Content>
              <table>
                <tr>
                  <td>
                    aaaa bbbb cccc dddd
                  </td>
                </tr>
              </table>
            </Content>
          </ext:Panel>
        </Items>
      </ext:Panel>
    </form>
  </body>
</html>

**Daniil** · May 14, 2013, 12:04 PM

I expected that you provide a test case with the constrainTo method.

It appears to be working fine.

var setConstraintPanel = function (panel) {
    if (panel.dd) {
        panel.dd.constrainTo(App.pnlContainer.getEl());
    }
};

Do you really need to calculate the boundaries manually?

Thread: [CLOSED] Limit x y drag on Ext.NET 2.x

Thread Tools

Search Thread

Display

[CLOSED] Limit x y drag on Ext.NET 2.x

Similar Threads

[CLOSED] CalendarPanel Limit No. Of CalendarModel ?

Limit of a Multiselect

Limit a Dataview

FileUploadField has limit ???

Limit panel resize?

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Limit x y drag on Ext.NET 2.x

[CLOSED] Limit x y drag on Ext.NET 2.x

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us