PDA

View Full Version : [CLOSED] Resize and Drag



softmachine2011
Jun 19, 2012, 1:46 PM
Hi,

Based on these both examples:

http://examples2.ext.net/#/Miscellaneous/Resizable/Basic/

http://examples2.ext.net/#/DragDrop/Advanced/Drag_with_State/

We need to resize and drag at the same time, but it looks like a draggable and resizable div is not showing its corresponding size when it is being resized.

Could this be a bug or controls properties must be defined in some other way?

Here is a sample code:


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var startDrag = function (x, y) {
var dragEl = Ext.get(this.getDragEl());
var el = Ext.get(this.getEl());
el.hide();

dragEl.applyStyles({ border: "solid gray 1px" });
dragEl.update(el.dom.innerHTML);
dragEl.addCls(el.dom.className + " dd-proxy");
};

var afterDrag = function () {
var el = Ext.get(this.getEl());
el.show();
if (App.DragArea)
App.DragArea.fireEvent("itemdrag", this);
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Viewport runat="server" Layout="Fit" AutoScroll="true">
<Content>
<ext:DDProxy runat="server" Target="dd1-item1" Group="tree2div">
<StartDrag Fn="startDrag" />
<AfterDrag Fn="afterDrag" />
</ext:DDProxy>
<ext:Resizer
ID="CustomResizer"
runat="server"
Target="dd1-item1"
Wrap="true"
MinWidth="50"
MinHeight="20"
Handles="All"
Dynamic="true"
/>
</Content>
<Items>
<ext:Panel
runat="server"
Title="Example"
Icon="Application"
Region="Center"
Margins="0">
<Content>
<div id="drop-header" style="border:1px #a0a0a0 solid;margin:20px;padding:8px;height:140px">
<div class="dynamicDiv" id="dd1-item1" style="width: 200px; border: 1px solid silver;">Item 1.1</div>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</body>

Thanks.

Daniil
Jun 19, 2012, 3:14 PM
Hi,

I would use the DD class instead of the DropProxy one.

<ext:DD runat="server" Target="dd1-item1" Group="tree2div" />

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dd.DD (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.dd.DD)

softmachine2011
Jun 19, 2012, 3:47 PM
Hi,

Is it needed any additional style?

It looks like sometimes, after several resizes, the div border line disappears...


<ext:DD runat="server" Target="dd1-item1" Group="tree2div">
<StartDrag Fn="startDrag" />
<EndDrag Fn="afterDrag" />
</ext:DD>

Thanks again.

Daniil
Jun 19, 2012, 9:08 PM
Please try without StartDrag and EndDrag listeners. Does it not suite your needs?

softmachine2011
Jun 20, 2012, 10:10 AM
Well, we need StartDrag and EndDrag listeners to perform some other stuff, but we removed default sample code and it works better.

There is only a little flicker in IE when div starts to being resized. In Chrome there is not problem about this.

Thanks again.

Daniil
Jun 20, 2012, 1:31 PM
Well, we need StartDrag and EndDrag listeners to perform some other stuff, but we removed default sample code and it works better.


Sure, it might be done. But, I think, you should not hide the "el".



There is only a little flicker in IE when div starts to being resized. In Chrome there is not problem about this.


Hmm, seems I see the same behavior in IE 9, FF 13 and Chrome 19 on my end.

softmachine2011
Jun 20, 2012, 1:51 PM
Sure, it might be done. But, I think, you should not hide the "el".

Well, we don't hide "el", but we perform some other stuff we need instead in these listeners.



Hmm, seems I see the same behavior in IE 9, FF 13 and Chrome 19 on my end.

Yes, I can see the same behaviour in Chrome right now.

Daniil
Jun 20, 2012, 6:18 PM
we perform some other stuff we need instead in these listeners.

Yes, I think it's the destination of these listeners.


Yes, I can see the same behaviour in Chrome right now.

I am afraid it might be too hard or, maybe, even impossible to avoid that flickering.