PDA

View Full Version : Ext JS 2.2.1 - funny cursor blinking issue across tabs



mayura
9 Oct 2009, 4:07 AM
I'm facing following cursor blinking issue in Ext JS 2.2.1.
Scenario:
I've a tab panel with 4 tabs. There are editable forms in first 3 tabs. When I click on any form field (example text field) in first tab and immediately click on some tab, I see cursor blinking in the new tab at same position where text field was in first tab. And if I type something and move back to first tab, I see that typed text in the text field!!
This issue is creating havoc in our system.
Additional Info:
I've 'tabchange' & 'beforetabchange' event handlers. In 'tabchange', I update title of the tab (include a completed checkmark). In 'beforetabchange' I perform validations with data on current tab.

I've tried so many options to fix this. Funnily enough when I comment code in 'tabchange' to update the title, this issue is resolved.

I appreciate any ideas with regard to this issue. Has anyone ever faced this?

Animal
9 Oct 2009, 4:28 AM
You could try onfiguring each tab with hideMode: 'offsets'

mayura
12 Oct 2009, 2:51 AM
Thanks for the reply.
I tried this option. Cursor disappears now but when I type something and go back to earlier tab, whatever I had typed still appears. :s

Any other suggestion?

Animal
12 Oct 2009, 4:21 AM
I don't understand. You are saying that the field you entered text into does not have its value reset, and that you want its value reset???

mayura
14 Oct 2009, 9:01 PM
No what I meant is:

Say, I'm on first tab and I focus on any text field (I don't type anything) and I click on second tab. Second tab opens but I get a cursor blinking at the position where text field was in first tab. If I type anything now and click on first tab I see the typed content in the text field.

By adding hideMode:'offsets' in the tab, when I click on second tab I don't see the cursor blinking, but if I type anything and go back to first tab the typed text appears:(

Animal
14 Oct 2009, 11:21 PM
You're going to have to (horrors!) debug using Firebug.

mayura
15 Oct 2009, 12:06 AM
:)

BTW I was testing in IE7. Morning I uninstalled it and in IE 6 this issue does not occur!!

Still I have figure out why it is occurring in IE7.

Animal
15 Oct 2009, 12:40 AM
Test in IE8 with the debugger

mayura
20 Oct 2009, 2:46 AM
Can someone please help me with this issue?

mayura
22 Oct 2009, 2:47 AM
This is finally resolved.

Issue was related extra CSS being applied to the tab name instead of using the ext classes
'.x-tab-strip span.x-tab-strip-text{}' and '.x-tab-strip-active span.x-tab-strip-text{}'.

I don't really understand why this is so, but it works:D