PDA

View Full Version : [SOLVED] Trouble registering render listener with Panel



winklerd
11 Aug 2010, 2:03 PM
I am attempting to use drag and drop on a page (using one of the examples as a starting point). Everything seems to be working so far except when I try to register a listener with an Ext.Panel object, the page loads incorrectly. If I remove the listener, everything looks fine.



//Inside Ext.onReady
var rightPanel = new Ext.Panel({
title: 'Widget',
margins: '0 5 5 0',
listeners: {
render: initRightDropZone
}
});

//Outside Ext.onReady
function initRightDropZone(p) {
p.dropZone = new Ext.dd.DropZone(p, {

getTargetFromEvent: function(e) {
return e.getTarget('.right-panel-target');
},

onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addClass('right-panel-hover');
},

onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeClass('right-panel-hover');
},

onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},

onNodeDrop : function(target, dd, e, data){
p.add(data.component);
return true;
}
});
}
Here's what it looks like with the listener included:
21910
(yes, that's the whole page, squished into one corner)

I have a feeling I configured something wrong within the listener, but I don't know what. Could someone point me in the right direction?

Thanks!

Edit: I am getting an error in FireBug that I didn't notice before:

this.el is null
http://ui04/dwinkler/trunk/querybuilder/includes/widgets/ext-3.2.1/ext-all-debug.js
Line 20576

That section of code is:


Ext.dd.DropTarget = function(el, config){ this.el = Ext.get(el);


Ext.apply(this, config);


if(this.containerScroll){
Ext.dd.ScrollManager.register(this.el);
}

//Following line is the one that's throwing the error

Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group,
{isTarget: true});


};

darthwes
11 Aug 2010, 2:34 PM
render: function() {
console.log("args", arguments);
console.log("this", this);
console.log("initRightDropZone", initRightDropZone);
if(Ext.isDefined(initRightDropZone) && !Ext.isEmpty(initRightDropZone) && Ext.isFunction(initRightDropZone)) {
initRightDropZone.apply(arguments, this); //or initRightDropZone(..);
}
}


That should tell you something. I doubt your function is in scope. If it does see your function, then clearly the error is in the function.

GL, Hope that helped.

winklerd
11 Aug 2010, 2:45 PM
Thanks for your reply. It didn't help directly but it got me thinking about the error again. Turns out I was passing p to the DropZone constructor when I should have been passing p.getEl(). The new code is as follows:



//Inside Ext.onReady
var rightPanel = new Ext.Panel({
title: 'Widget',
margins: '0 5 5 0',
listeners: {
render: initRightDropZone
}
});

//Outside Ext.onReady
function initRightDropZone(p) {
/*** CHANGED LINE ***/
p.dropZone = new Ext.dd.DropZone(p.getEl(), {

getTargetFromEvent: function(e) {
return e.getTarget('.right-panel-target');
},

onNodeEnter : function(target, dd, e, data){
Ext.fly(target).addClass('right-panel-hover');
},

onNodeOut : function(target, dd, e, data){
Ext.fly(target).removeClass('right-panel-hover');
},

onNodeOver : function(target, dd, e, data){
return Ext.dd.DropZone.prototype.dropAllowed;
},

onNodeDrop : function(target, dd, e, data){
p.add(data.component);
return true;
}
});
}