PDA

View Full Version : Dropzones do not work after scroll



LizMyself
21 Jan 2015, 3:25 AM
Hey together,

I have some dropzones in my application.

If I scroll down and it is not on the place as it was in the beginning I can't drop anything (the notifyEnter also is not working).

If I scroll back to the point I startet it works again.

I can't find a event i can use or something else to refresh my DropTarget after a scroll.


Here is my DropTarget:


var that = this; var usePart = this.el;
this.containerPanelDropTarget = new Ext.dd.DropTarget(usePart, {
ddGroup: 'reportelement-dd-group',
notifyEnter: function(ddSource, e, data) {
that.addCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyOut: function(ddSource, e, data) {
that.removeCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyDrop: function(ddSource, e, data) {
that.removeCls('x-wizard-layouter-dropcolumn-active-over');
console.log("drop");
return true;
}
});

Without a scrollbar everything works fine.

Jad
21 Jan 2015, 3:36 AM
hi

i think your drop zone had to be on a fit layout in her container

LizMyself
21 Jan 2015, 4:29 AM
So you think it is not working with a vbox or hbox?

Jad
21 Jan 2015, 4:34 AM
layout: { type: 'hbox', align: 'stretch' }

LizMyself
21 Jan 2015, 4:52 AM
Yes I use it like this.

Jad
21 Jan 2015, 5:01 AM
can we see the complet code ?

LizMyself
21 Jan 2015, 5:27 AM
This is the dropzone itself. The Problem is, I use many of them, my View looks like this:

Dropzone
Table
Dropzone

If I dragg another Table it looks like:

Dropzone
Table
Dropzone
Table
Dropzone



Ext.define('XXX.XXX.XXX.view.panel.HorizontalDropZone', { extend: 'Ext.container.Container',
alias: 'widget.HorizontalDropZone',
lid: 'horizontalDropZone',
did: 'dropZone',
flex: 1,
border: false,
minHeight: 20,
maxHeight: 25,
hidden:true,
listeners:{
// to add and remove the droptarget of the panel bevorhide and bevorshow is necessary because this needs the
// html part of the element and if not done where are sometimes Problems
beforehide:function(){
if(this.containerPanelDropTarget){
// destroys the droptarget bevor the element is hidden
this.containerPanelDropTarget.destroy();
}
if(this.containerPanelDropTargetFormulardrill){
// destroys the droptarget bevor the element is hidden
this.containerPanelDropTargetFormulardrill.destroy();
}
},
beforeshow: function() {
// starts the function to add the droptarget
this.addDropzone();
}
},


/**
* Function to init
*/
initComponent: function()
{
this.callParent(arguments);
this.childrenNumber = 0;


}, // ----------------------------------------------------- end of initComponent() ---
/**
* Adds the Dropzone to the panel bevor the panel is shown
*/
addDropzone:function(){
var that = this;
var usePart = this.el;
this.containerPanelDropTarget = new Ext.dd.DropTarget(usePart, {
ddGroup: 'reportelement-dd-group',
notifyEnter: function(ddSource, e, data) {
console.log("check");
that.addCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyOut: function(ddSource, e, data) {
that.removeCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyDrop: function(ddSource, e, data) {

that.removeCls('x-wizard-layouter-dropcolumn-active-over');
if (ddSource.panel.lid === "moveImg"){
that.up('wizardViewdefinitionCenterPanel').fireEvent("moveChild", that.firstLevelChildrenNumber, ddSource.panel);
}
else{
that.up('wizardViewdefinitionCenterPanel').fireEvent("addChild", that.firstLevelChildrenNumber, ddSource.panel);
}
return true;
}
});
this.containerPanelDropTargetFormulardrill = new Ext.dd.DropTarget(usePart, {
ddGroup: 'reportelement-dd-group-formdrill',
notifyEnter: function(ddSource, e, data) {
console.log("check");
that.addCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyOut: function(ddSource, e, data) {
that.removeCls('x-wizard-layouter-dropcolumn-active-over');
},
notifyDrop: function(ddSource, e, data) {

that.removeCls('x-wizard-layouter-dropcolumn-active-over');
if (ddSource.panel.lid === "moveImg"){
that.up('wizardViewdefinitionCenterPanel').fireEvent("moveChild", that.firstLevelChildrenNumber, ddSource.panel);
}
else{
that.up('wizardViewdefinitionCenterPanel').fireEvent("addChild", that.firstLevelChildrenNumber, ddSource.panel);
}
return true;
}
});
} // ------------------------------------------------------- end of addDropzone() ---
}); // -- end of Netmind.plugins.wizard.viewdefinition.view.panel.HorizontalDropZone ---
//---------------------------------------------------------------------- end of file ---


The beginning of my mainPanel looks like: (It is part of a borderlayout.)


Ext.define('XXX.XXX.XXX.XXX.view.panel.CenterPanel', {
extend: 'Ext.panel.Panel', region:'center',
// split: true,
border:true,
autoScroll:true,
margin:'10 20 30 10',
layout:
{
type: 'vbox',
align: 'stretch',
pack: 'stretch'
},

Jad
21 Jan 2015, 5:39 AM
so if you scrool down it's normal you see no more the first DropZone !

LizMyself
21 Jan 2015, 6:30 AM
So i could solve the Problem:

I put the dropzone into a container witch i replace everyTime a notifyOut Event was fired.

This works fine.