PDA

View Full Version : Ext.ux.TabPanelDragover



John Sourcer
17 Sep 2008, 12:46 AM
Hi All,

My first small Ext ext so happily take any crits or suggestions:




Ext.namespace('Ext.ux');
/*
* Ext.ux.TabPanelDragOver Extension Class
*
* @author John Sourcer
* @version 0.1
*
* @class Ext.ux.TabPanelDragOver
* @extends Ext.TabPanel
*
* Description: Extends Tab Panel to allow objects to be dragged
* onto the tab and switches the view to dragover tab. Similar to drag over windows
* taskbar
*/
Ext.ux.TabPanelDragOver = function(config) {
Ext.ux.TabPanelDragOver.superclass.constructor.call(this, config);
};

// extend
Ext.extend(Ext.ux.TabPanelDragOver, Ext.TabPanel, {

initComponent : function(){
Ext.ux.TabPanelDragOver.superclass.initComponent.call(this);
},
initEvents: function() {
Ext.ux.TabPanelDragOver.superclass.initEvents.call(this);
this.strip.on('dragover', this.onDragOver, this);
},
onDragOver: function(e) {
var t = this.findTargets(e);
if (!t.close && t.item && t.item != this.activeTab) {
this.setActiveTab(t.item);
}
}
});

Ext.reg('tabpaneldragover', Ext.ux.TabPanelDragOver);

garraS
17 Sep 2008, 6:13 AM
Screenshot? Demo? You need to talk more about it. :)

jay@moduscreate.com
17 Sep 2008, 6:48 AM
can you explain a use case for this?

John Sourcer
17 Sep 2008, 7:20 AM
Here's a quick mock-up with out dropping on destination.

http://66.98.216.83/tabpaneldragover/

Use case scenario:

I have a large library of building objects in one tab panel (in a grid with images etc), in anther panel I have cost estimates. A user can search for a building object and drag and drop it cross tab to an estimate. The 2 applications are seperated as only certain authenticated users have access to the estimates. I fully comprehend that this could be done cross panel but the estimate have many columns and need as much screen estate as possible.

watrboy00
17 Sep 2008, 8:50 AM
Re-factored a little bit...


/*

* Ext.ux.TabPanelDragOver Extension Class

*

* @author John Sourcer

* @version 0.1

*

* @class Ext.ux.TabPanelDragOver

* @extends Ext.TabPanel

*

* Description: Extends Tab Panel to allow objects to be dragged

* onto the tab and switches the view to dragover tab. Similar to drag over windows

* taskbar

*/
Ext.ux.TabPanelDragOver = Ext.extend(Ext.TabPanel, {
initEvents: function() {
Ext.ux.TabPanelDragOver.superclass.initEvents.call(this);

this.strip.on('dragover', this.onDragOver, this);
},

onDragOver: function(e) {
var t = this.findTargets(e);

if (!t.close && t.item && t.item != this.activeTab) {
this.setActiveTab(t.item);
}
}
});
Ext.reg('tabpaneldragover', Ext.ux.TabPanelDragOver);
Now what would be sweet if this worked for the Portal demo. Drag a portlet from one tab and drop it on another would be pretty sweet....

/me goes to the lab.

jay@moduscreate.com
17 Sep 2008, 10:02 AM
I see now. thanks for placing this online.

dellerbie
7 Oct 2008, 10:09 AM
I'm confused how this ux works. Where is the 'dragover' event defined/fired on the strip? I can't seem to find that event anywhere.

nickar
5 Nov 2008, 4:48 AM
I have been trying your code, and it seems that it is not the same to drag a piece of selected text than to drag a draggable ExtJS element.
Maybe we could implement a DropTarget, and find a way to register a Listener in Ext.dd.Registry to accept all droppable elements.

Bulle Bas
5 Nov 2008, 10:16 AM
http://66.98.216.83/tabpaneldragover/
Seems it doesn't work. I can drag but not drop.

nickar
6 Nov 2008, 3:21 AM
Seems it doesn't work. I can drag but not drop.
Yes, that's the spirit of the example.
The tabPanel's tabs strip implements the ondragover method, a dom method that fires when you drag a selection over.
It seems that Ext doen't uses this technique, so when you drag a DD object it doesn't react.
I've modified this class:


Ext.namespace('Ext.ux');
/*
* Ext.ux.TabPanelDragover Extension Class
*
* @author John Sourcer
* @version 0.1
*
* @class Ext.ux.TabPanelDragover
* @extends Ext.TabPanel
*
* Description: Extends Tab Panel to allow objects to be dragged
* onto the tab and switches the view to dragover tab
*/
Ext.ux.TabPanelDragover = function(config) {
that=this;
Ext.ux.TabPanelDragover.superclass.constructor.call(this, config);
};

// extend
Ext.extend(Ext.ux.TabPanelDragover, Ext.TabPanel, {

initComponent : function(){
Ext.ux.TabPanelDragover.superclass.initComponent.call(this);
},
initEvents: function() {
Ext.ux.TabPanelDragover.superclass.initEvents.call(this);
var ddt = new Ext.dd.DropTarget(this.strip, {ddGroup: 'imagesDD'});
var that=this;
ddt.notifyOver = function(source, evt, data) {
var t = that.findTargets(evt);
if (!t.close && t.item && t.item != that.activeTab) {
that.setActiveTab(t.item);
}
return this.dropNotAllowed
}
}
});
Ext.reg('tabpaneldragover', Ext.ux.TabPanelDragover);



This allows me to drag anything in the imagesDD group over the tabs.

Is there any way to make DropTarget react with any dragGroup?
Regards

nickar
6 Nov 2008, 4:56 AM
Is there any way to make DropTarget react with any dragGroup?
Regards

I've tried to do this:


var ddt = new Ext.dd.DropTarget(this.strip, {});

regDragDrop = Ext.dd.DragDropMgr.regDragDrop;

Ext.dd.DragDropMgr.regDragDrop = regDragDrop.createSequence(function(oDD,sGroup) {
//console.debug();
//this.addToGroup(sGroup);
if (oDD!= this){
console.log(oDD, sGroup);
this.addToGroup(sGroup);
}
}, ddt);

It is called every time an object other is registered as draggable.
It Works for my groups (i've removed the imagesDD in the constructor as you can see), but it doesn't work with portal panels :S

I'll be working with this, but focusing in the same action for colapsed panels as with those in the border layout.

I think it's a nice touch!

Regards

nickar
6 Nov 2008, 10:16 AM
I'll be working with this, but focusing in the same action for colapsed panels as with those in the border layout.
I think it's a nice touch!
Regards

Well, i've partially solved this:


el=mainScreen.viewport.items.get(3);
dropel = Ext.get(el.id+'-xcollapsed');
var ddt = new Ext.dd.DropTarget(dropel, {ddGroup:'imagesDD'});
ddt.notifyEnter = function(source, evt, data) {
if (el.getState().collapsed) {
el.expand();
}
return this.dropAllowed
}

This code adds a droptarget to the collapsed div in borderlayout, and expands it on mouseover!
i have a dataview drop target inside the collapsed panel.
When i drag something over the collapsed panel, it expands as it was planned, but it doen't allow me to drop it in the dataview :S

Well, tell me what you think.

bwoody
5 Dec 2008, 10:22 AM
John, Thanks for posting this.

With a couple of tweaks, I was able to drag Portlets from a Portal in one tab to a Portal in another tab.

I am using the Stateful Portal which is an extension of the Ext Portal example written by 'dpwhittaker': http://extjs.com/forum/showthread.php?t=43561. I haven't taken a close look, but I believe this would also work with the original Ext Portal. My layout is basically an Ext.ux.TabPanelDragover control with a few tabs. Each tab is a Ext.ux.Portal.

I looked at all the versions of Ext.ux.TabPanelDragover presented in this thread, but wasn't able to get them to work correctly. I made a couple of changes to the initEvents method:



initEvents: function() {
Ext.ux.TabPanelDragover.superclass.initEvents.call(this);
var ddt = new Ext.dd.DropTarget(this.strip, { ddGroup: 'portal' });
var tabPanel = this;
ddt.notifyOver = function(source, evt, data) {
//new code starts here
var mouse = evt.getXY();
//loop through the tabs in the TabPanel to see which the mouse is over
for (var i = 0; i < tabPanel.items.getCount(); i++) {
var tab = tabPanel.items.get(i);
var tabEl = tabPanel.getTabEl(tab);
//Get the region for this tab
var region = Ext.fly(tabEl).getRegion();
//If the mouse is in the tab's region, set it to the active tab and quit
if (mouse[0] > region.left && mouse[0] < region.right && tabPanel.activeTab != tab) {
tabPanel.setActiveTab(tab);
break;
}
}
//new code ends here
return this.dropNotAllowed;
}
}
-- I specified ddGroup: 'portal' in the DropTarget.
-- For more clarity, I changed:
var that = this; to -> var tabPanel = this;-- I changed the code to detect which tab the mouse was over

These changes seemed to work at first. I was able to move a portlet from one tab to the next, but after the first move, it stopped working. After digging around in the Ext DD source for awhile, I finally found a quick fix. Just add this somewhere in your startup code:

Ext.dd.DragDropMgr.useCache = false;The DragDropMgr caches the location of each drop zone as they are encountered and then uses those locations to determine if the mouse is over a certain drop zone. It does not take into account the fact that only one portal is visible at a time and that only the visible portal should be considered. The simplest way to fix this is turn the caching off so that it is forced to find the location of the drop zone each time. I havent noticed enough of a performance hit to justify refactoring this code to check for the visiblity of a drop zone.