PDA

View Full Version : How can I define a DnD area for a Grid that doesn't include its column headers?



maya
27 May 2007, 3:13 AM
In order to implement rows DnD in a Grid I defined the DnD area as follows (I used code suggested in this forum):
<div id="grid_panel" >
<div id="grid_table"></div>
<div id="GridDD"></div>
</div>

//Code that enables D&D of rows.
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'GridDD',
copy:false,
notifyDrop : function(dd, e, data){
var sm=grid.getSelectionModel();
var rows=sm.getSelections();
var cindex=dd.getDragData(e).rowIndex;
for(i = 0; i < rows.length; i++) {
rowData=ds.getById(rows[i].id);
if(!this.copy){
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,rowData);
};
}
});
//End of: Code that enables D&D of rows.

In this case I have 2 problems:
1. The columns DnD is disabled - because they are also dropped to the "GridDD" area
2. A user can drop rows dropped into the columns area - and this makes them disapper from the table.

Any suggestions?

Thanks,
Maya

maya
27 May 2007, 3:15 AM
If I could restrict the DnD area only to the rows area - those 2 problems may have been solved.

Any idea how to restrict the DnD area only to the rows area?

jsakalos
27 May 2007, 6:20 AM
If I could restrict the DnD area only to the rows area - those 2 problems may have been solved.

Any idea how to restrict the DnD area only to the rows area?

Hmmm,

just hint: Try constrainTo(el, 0, false) where el is the container of rows. I've just done the similar in my Accordion (http://www.aariadne.com/extjs/examples/accordion.html) example but it is explained nowhere, you'd need to dig in the code.

mdelanno
27 May 2007, 7:18 AM
You can test the classname of the target to avoid drop in the column area :



notifyDrop : function(dd, e, data){
if (dd.el.dom.className != 'x-grid-header') {
// Do your stuff here
}
}

maya
27 May 2007, 12:54 PM
Thanks for your replies.

Saki - can you give an example? I didn't find it in the Accordion code.

mdelanno - is it safe enough to use the class name? I may change in the next version.
Can I use another identification rather than the class id?

Thanks,
Maya

jsakalos
27 May 2007, 1:11 PM
Thanks for your replies.

Saki - can you give an example? I didn't find it in the Accordion code.

mdelanno - is it safe enough to use the class name? I may change in the next version.
Can I use another identification rather than the class id?

Thanks,
Maya

Hi Maya,

here are some code fragments (from Ext.Accordion.js):



/**
* Adds the panel to Accordion
* @param {Ext.InfoPanel} panel Panel to add
* @return {Ext.InfoPanel} added panel
*/
add: function(panel) {
this.body.appendChild(panel.el);

// some code deleted here for clarity

// panel dragging within dock
panel.dd = new Ext.Accordion.DDDock(panel, 'dock-' + this.id, this);

// some code deleted here for clarity

return panel;
}

There is the dd object for each added panel. You can find custom Ext.Accordion.DDDock class near the end of that file but this class is not crucial in restraining the region.



, constrainToDesktop: function() {
this.items.each(function(panel) {
panel.dd.constrainTo(this.desktop, 0, false);
}, this);
}
, clearConstraints: function() {
this.items.each(function(panel) {
panel.dd.clearConstraints();
});
}
These are methods doing the trick. I iterate through all panels in constrainToDesktop method and for each of them a set constraints and reverse is true in clearConstraints.

I don't know how usable this would be in your app but I hope this could be a starting point for you.

Hi,

mdelanno
27 May 2007, 2:02 PM
mdelanno - is it safe enough to use the class name? I may change in the next version.

No, of course, but in next version, grid DD should be rewritten, so your code will not work anyway /:)