View Full Version : Drag grid rows onto Region tabs

20 Aug 2007, 5:46 AM
want to run by an idea before coding...

to enable users to drag grid rows onto region tabs and notify some panel object (in my case a tree inside the the targeted panel - contacted to the tab [drop target] - to be updated with row data) i need to do the following:

a) enable drag/drop of rows in the grid (easy, just set the enableDragDrop property to true)

b) every time a panel is added to my center region create a DropTarget out of the associated panel and define a notifyDrop method on that tab

c) connect the notifyDrop to a private method with my custom panel (to update the local tree)

it is that last part of hooking up the notifyDrop to custom panels that is tricky. thinking about creating a new event and hooking it into the region. then my custom panels can simply listen for that event.

this type of function has probably come before (just haven't seen it in the forum). / matthew

21 Aug 2007, 1:30 AM
didn't really think about how DD would work in my case....

first off the DropTarget works only with DropSource objects. not a big problem. every time i add a panel i get the associated tab and add a simple alert:

var tab = layout.getRegion(this.region).getTabs().getTab(this.id);
var dropTarget = new Ext.dd.DropTarget(
notifyDrop : function(source, event, data) {

and every time the load event fires on my dataStore associated with the grid i create a DragSource:

function(store, records, options) {
var rows = this.grid.getView().getBodyTable().rows;

for(var rowIndex = 0; rowIndex <= rows.length; rowIndex++){
var el = new Ext.Element(rows[rowIndex]);
var dragSource = new Ext.dd.DragSource(el);

however, i don't want the row to disappear from the grid. that little issue wasn't in my original thinking. not sure what i want to do is possible with DD functions.

the grid row should look/feel like a regular DragSource but never really disappear from the grid. getting an error from the GridView in the findRowIndex method:

[Exception... "Component returned failure code: 0x80004002 (NS_NOINTERFACE) [nsIDOMHTMLTableRowElement.rowIndex]" nsresult: "0x80004002 (NS_NOINTERFACE)" location: "JS frame :: http://w42009186:7003/Matrix_Portal/ext/ext-all-debug.js :: anonymous :: line 27404" data: no]
[Break on this error] return r ? r.rowIndex : false;

any ideas?

21 Aug 2007, 3:12 AM
just a side note. the error i got (post number 2) only occurs when the row is dropped on an existing record/row in the grid. otherwise when i drop the row onto the tab the DropTarget nofity is kicked in and the row returns to the grid (graphically).

21 Aug 2007, 6:00 AM
also tried to make the TabPanel (for my region) a DropZone:

var tabs = layout.getRegion('center').getTabs();
var dropZone=new Ext.dd.DropZone(tabs.el, {});

dropZone.onNodeDrop=function(n, dd, e, data){
// send message to GUI
MATRIX.layout.ApplicationController.setMessage("onNodeDrop captured");
return true;

and every time a panel is added it is registed with:

var tab = layout.getRegion(this.region).getTabs().getTab(this.id);

then i enabled drag with the grid (enableDrag: true). but dragging the rows does not notify the registered tab or the dropZone.

any ideas???

22 Aug 2007, 10:50 PM
not specifing a matching group kills the drag/drop....

matched up the group between the panel's tab and the grid then everything worked fine. so the code for the panel is:

var tab = layout.getRegion(this.region).getTabs().getTab(this.id);
var dropTarget = new Ext.dd.DropTarget(tab.el, {
ddGroup : 'PanelDD',
notifyDrop : function(source, e, data) {
// do stuff (like call a private function to the custom panel

and the grid is simply:

this.grid = new Ext.grid.Grid(
ds: this.dataStore,
cm: this.columnModel,
selModel: new Ext.grid.RowSelectionModel({singleSelect: false}),
enableColLock: false,
ddGroup : 'PanelDD',
enableDrag: true

tried to dig my way through the code but just see that in the fireEvents method in Ext.dd.DragDropMgr matches target/source by group.