Detecting Mouse Movement Within a Cell in a Grid

[mike000]

In my continuing quest to make an Excel-like grid in ext js, I'm trying to implement Excel's ability to drag the bottom corner of a cell across multiple cells and have the value be copied or be filled in with the correct series value.

I'm running into the problem of being able to detect when the mouse is over the bottom right part of the selected cell. It's not so much figuring out the coordinates that is the problem, it's that I need to be able to continually check if the mouse is in the bottom right hand part of the cell, not just on a mouseover event (that only fires once per entry into the cell).

The two solutions that I could come up with were:

1) Figure out a way to implement mousemove in ext js. I've seen it done in Javascript, so I'm pretty sure it can be done in ext js. However, I'm not sure how I would do it using an EditorGrid in ext js.

2) Determine a way to display the selection image in such a fashion that it can have its own mouseOver listener. This seems like it might be more difficult than the first option.

Here's the code I have so far, which pretty much works except for in-cell movement:


onMouseOver: function (e, t) {
var v = this.grid.getView();
var row = v.findRowIndex(t);
var col = v.findCellIndex(t);

if (this.originalSelection == null) {
return;
}

if (row == this.originalSelection.cell[0] && col == this.originalSelection.cell[1]) {
//Now check if mouse is at the bottom right of the cell

var ocell = v.getCell(row, col); //The cell you're over

var inBounds; //If you're in the bounds of the bottom right of the cell or not

var coords = e.getXY();
var x = coords[0];
var y = coords[1];

//Code to take into account the width of locked columns on the left that obscure some of the view
if (this.fixedColWidth == -1) {
//get the width of the fixed columns
var cm = this.grid.colModel;
var cc = cm.getColumnCount(false);
var i;
this.fixedColWidth=0;
for (i=0; i<cc; i++) {
if (cm.isLocked(i) == true && cm.isHidden(i) == false ) {
this.fixedColWidth += cm.getColumnWidth(i);
}
}
}

var scroller = this.grid.view.scroller.dom;

//Get how far x is from the right of the cell
var xDif = ocell.offsetLeft + ocell.offsetWidth - scroller.scrollLeft;
x = x - this.fixedColWidth;
xDif = xDif - x;

//Get how far y is from the bottom of the cell (currently is a little off, but not that important for understanding)
var yDif = ocell.offsetTop + ocell.offsetHeight + this.grid.view.mainHd.dom.offsetHeight - y - scroller.scrollTop;


if (xDif < 15 && yDif < 15) {
inBounds=true;
} else {
inBound=false;
}

if (inBounds) {
//Add a class that changes the cursor to be a cross
//This will eventually trigger some variable that will be used in dragging the cell
Ext.fly(ocell).addClass("cellDragCursor");
} else {
//Remove the class so that the cursor is once again an arrow
Ext.fly(ocell).removeClass("cellDragCursor");
}

}
},

I've also attached an image of what the drag icon looks like. Basically when you have your cursor over that black part, the cursor should turn into a cross and you should then be able to do a custom drag that fills in all the cells you select with some value (not important to this discussion).

Any help on this issue would be much appreciated.

[mike000]

Sorry for bumping this, but I realized I posted this late on a Friday so I don't know how many people ended up seeing this.

Any help would be much appreciated.

[devnull]

not really any help for your code i realize, but i have had to put code in to ignore multiple mouseover events per cell in one of my apps.