PDA

View Full Version : draggable delegate not working properly on panel?



elteteel
14 Jan 2013, 5:08 AM
I'm trying to create panel draggable using some element inside (button for example).
My example code below doesn't work as expected - panel can be dragged by anything inside panel area not only delegated handle (button)

http://jsbin.com/ahipob/1/edit


Ext.onReady(function() {

var btn1 = Ext.create('Ext.button.Button', {
text: 'btn1'
});

var btn2 = Ext.create('Ext.button.Button', {
text: 'btn2'
});


var panel1 = Ext.create('Ext.panel.Panel', {
width: 100,
height: 100,
items: ,
[B] draggable: {
delegate: '#'+Ext.escapeId(btn1.id)
}
});



Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
items: [
panel1
]
});
});


What am I doing wrong?
Thanks.

mitchellsimoens
16 Jan 2013, 12:34 PM
Are you wanting to make the button draggable or only allow dragging if the drag started on the button?

slemmon
16 Jan 2013, 10:54 PM
I'm not seeing delegate as a config for Ext.panel.DD or any its parent classes. Probably I'm missing it, but for what it's worth I can't get it to work either.

elteteel
17 Jan 2013, 4:12 AM
I want to allow dragging panel only when drag started on button.


Are you wanting to make the button draggable or only allow dragging if the drag started on the button?

elteteel
17 Jan 2013, 4:19 AM
According to documentation draggable can be a config of ComponentDragger. Ext.util.ComponentDragger has delegate config property so everything should work properly :/

This may also be specified as a config object for the ComponentDragger (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.util.ComponentDragger) which is instantiated to perform dragging.


I'm not seeing delegate as a config for Ext.panel.DD or any its parent classes. Probably I'm missing it, but for what it's worth I can't get it to work either.

steffenk
31 Dec 2014, 6:37 AM
it's still not working, and the complete DD in ext is a real pain.

DD with panels are completely different to DD with other components.

Delegate property is working fine with other components, but not with panels. And - why should i use it? Simple: I have panels without headers and textfields inside. So i need delegate to set a drag handle to be able to access textfields, otherwise i always would start dragging instead of getting textfields focus.

Still on debugging, but i can't get why it's implemented in such different ways.

steffenk
1 Jan 2015, 8:51 AM
got it to work, however - the draggable configuration is not respected for panel. So delegation works with this override, but eg constrain does not as it's not implemented.
BTW - i wonder how this should work at all - the constructor is called with panel and calls parent with panel.el. I corrected this also in this override.



Ext.define('Ext.overrides.panel.DD', {
override: 'Ext.panel.DD',

constructor : function(panel, cfg){
var me = this;

me.panel = panel;
me.dragData = {panel: panel};
me.panelProxy = new Ext.panel.Proxy(panel, cfg);
me.proxy = me.panelProxy.proxy;
me.delegate = cfg.delegate;

me.callParent([panel, cfg]);
me.setupEl(panel);
},

setupEl: function(panel){
var me = this,
header = panel.header,
el = panel.body,
handle;

if (me.delegate) {
handle = panel.down(me.delegate);
if (handle.el) {
el = handle.el;
me.setHandleElId(el.id);
}
} else {
if (header) {
me.setHandleElId(header.id);
el = header.el;
}
}
if (el) {
el.setStyle('cursor', 'move');
me.scroll = false;
} else {
// boxready fires after first layout, so we'll definitely be rendered
panel.on('boxready', me.setupEl, me, {single: true});
}
}

})

steenole
7 Jan 2015, 4:53 AM
Thank you. Your override just saved my day :-)