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

Page 1 of 2 12 LastLast
  1. #1

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

    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
    Last edited by Daniil; May 15, 2013 at 4:10 PM. Reason: [CLOSED]
  2. #2
    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
  3. #3
    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>
  4. #4
    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>
    Last edited by Daniil; May 09, 2013 at 12:42 PM.
  5. #5
    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>
  6. #6
    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?
  7. #7
    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);
      }
    
    
    }
  8. #8
    in the select listener of combo
    If you could provide a sample to reproduce, we would be happy to investigate.
  9. #9
    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>
  10. #10
    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?
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] CalendarPanel Limit No. Of CalendarModel ?
    By mis@adphk.com in forum 2.x Premium Help
    Replies: 2
    Last Post: May 10, 2013, 1:25 AM
  2. Limit of a Multiselect
    By ddolan in forum 1.x Help
    Replies: 0
    Last Post: Jun 02, 2011, 8:45 PM
  3. Limit a Dataview
    By walle in forum 1.x Help
    Replies: 5
    Last Post: Jul 06, 2010, 6:04 PM
  4. FileUploadField has limit ???
    By Puia in forum 1.x Help
    Replies: 3
    Last Post: Mar 01, 2010, 4:02 PM
  5. Limit panel resize?
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 11, 2009, 4:28 PM

Posting Permissions