PDA

View Full Version : How to change component to be draggable/ resizable dynamically.



igoberman
10 Dec 2012, 7:15 AM
Hello, I have an application that gives user ability to rearrange components on the container.
If application goes into the 'edit' mode, clicking on the Component should make it draggable/ resizable and allow the user to move it around/ resize. It was easy to accomplish with YUI, but I could not find similar functionality with ExtJS. The only workaround I could find it to recreate the component with 'draggable'/ 'resizable' properties set to 'true'.
However, I now have another problem: user has to click on the Component twice to start dragging it (the fist click recreates the control, the second click starts drag).
I have couple questions:
1) Is it possible to make an existing Component draggable/ resizable dynamically.
2) And if the answer to 1) is 'No', how can I start drag immediately after I create the control (tried to call fireEvent('mousedown'), but it did not work).
Thanks

mitchellsimoens
12 Dec 2012, 8:13 AM
Have you tried to use the disable method on the ComponentDragger?

igoberman
12 Dec 2012, 8:49 AM
Tried to use 'disable' on 'dd' (not documented!) and it was successful, but disabling 'resizer' did not work: it is not possible to resize component, but it resizes the Window instead (looks like a bug). Also, I need to remove resize handles while component resize/drag is disabled. The test is below:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.1.0-gpl/resources/css/ext-all.css"/>
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>


<script type="text/javascript">


Ext.onReady(function () {
var window = Ext.create('Ext.window.Window', {
x: 5,
y: 5,
height: 200,
width: 300,
layout: 'fit',
items: [{
layout: {
type: 'absolute'
},
itemId: 'container',
border: false,
items: []
}],
renderTo: 'myContainer'
});


var container = window.getComponent('container');


window.on('boxready', function () {
var component = container.add({
xtype: 'component',
html: 'test',
x: 10,
y: 10,
border: 2,
style: {
borderColor: 'red',
borderStyle: 'solid'
},
draggable: { constrain: true, constrainTo: container.getEl() },
resizable: { pinned: true, handles: 's e', minHeight: 1, dynamic: true, constrainTo: container.getEl() },
width: 100,
height: 25
});


// !!!!!!!!!! Disable the dd and resizer.
component.dd.disable();
component.resizer.disable();
});


window.show();
});
</script>
</head>
<body>
<div id="myContainer"></div>
</body>
</html>