PDA

View Full Version : [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/#!/api/Ext.Component-cfg-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?

xeo4.it
May 15, 2013, 4:00 PM
Hi Daniil,
setting the constrainTo every time I change the size of container panel works fine.
Thank you very much

Jimmy