PDA

View Full Version : [solved] How do you change the cursor in ExtJs



silcreval
5 Nov 2009, 11:58 AM
Does ExtJS have a method for changing the cursor? I know
you can use document.body.style.cursor but wondered if there
was some ExtJS preferred way to do it?

Thanks

hendricd
5 Nov 2009, 12:02 PM
Does ExtJS have a method for changing the cursor? I know
you can use document.body.style.cursor but wondered if there
was some ExtJS preferred way to do it?

Thanks

It's just a style setting. Using Element methods, that would look like:



Ext.fly('someElId').setStyle('cursor', 'pointer');

silcreval
5 Nov 2009, 12:31 PM
I tried that, but nothing happened. I have a tabpanel so I'm using

getActiveTab().getEl().setStyle('cursor','wait');

but nothing happens. I checked getEl() is returning the right dom.

hendricd
5 Nov 2009, 12:36 PM
If you're trying to change the cursor of the tabStrip (not the body of the Tabpanels themselves 'getEl()') use Firebug and browser the DOM to determine what elements within the tabstrip you might want to treat that way.

silcreval
5 Nov 2009, 12:37 PM
As you move the cursor around, I notice that it changes quite a bit
in my app from pointers to the text bar, etc. I'm assuming that what
happens is that the cursor gets changed to some default when you
enter a div/text field/etc.

In the tabpanel it appears as a 'hand' - not something I've set but
there you go.

hendricd
5 Nov 2009, 12:39 PM
Or just add some new CSS rules rules based on the default ones (shown) defined by ext-all.css:




.x-tab-strip-active, .x-tab-strip-active a.x-tab-right {
cursor:default;
}

.x-tab-strip-active span.x-tab-strip-text {
cursor:default;
}

.x-tab-strip-disabled .x-tabs-text {
cursor:default;
}

silcreval
5 Nov 2009, 12:45 PM
Using Firebug was the answer - awesome - thanks!!!