How to change cursor image in ExtJS 4.1

Question

In ExtJS 4.0.2a I could change the cursor image over a grid using:

body.setStyle('cursor','move');

This doesn't seem to work in 4.0.7 or 4.1. I don't get any css error but it does give an unnatural lag at the point where the change should occur. Maybe it gets overridden?

UPDATE:

I am trying to run this from a grid onitemmousedown event. I found that the GridView gets a class ".x-unselectable" to make grid text unselectable (which I want). However in ExtJS 4.0.7 and 4.1 this ".x-unselectable" class has a cursor: default setting which gets inherited by all rows and cells of the grid and which overrides any other style attributes I apply to the cursor. It didn't have this in 4.0.2a.

If I force the gridview cursor style using !important the cursor only changes when I get it exactly on top of the 1px line in between two rows because the row still inherits the cursor setting. I suppose I could override the cursor style for all rows and then all cells using this same method but it seems like there should be some cleaner extjs method.

Answer 1

I'm guessing body is referring directly to the DOM element for the body. Have you tried

Ext.getBody().setStyle("cursor", "move");

That will wrap the body as an Ext.Element and give you all the nice methods. If that doesn't work, I suggest opening up a debugger and stepping into the setStyle function to see if anything weird is going on, or putting a watch on body.style.cursor.

Answer 2

Is there any particular reason not to just use CSS?

<style>
.MyTarget{
   cursor: pointer;
}

/*override the panel header cursor */
.x-form-field {
    cursor: pointer;
}
</style>
<div class="MyTarget">The cursor will be a pointer over the body here</div>

// Some Ext to create a panel - the panel header will have the new cursor declared in the CSS