PDA

View Full Version : [OPEN] [DEFER-996] Google Chrome, grid and focusEl



honzakuchar
26 May 2010, 6:10 AM
Hi,
when I play with Ext.grid.GridPanel, I found small issue with Chrome. When you click into grid <a href="#"> will get focus. -> Chrome will show link location in bottom of the viewport, wich will overlay part of application, this is not very user friendly.

20654

So in Chrome I overwrite master template in GridView to:

master = new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><button class="x-grid3-focus" tabIndex="-1"></button></div>',
'</div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',
'</div>'
);And added to CSS:


button.x-grid3-focus {
border: none;
background-color: transparent;
}
Red code is changed/new.

I use ExtJS 3.2.0.

Now all works fine, location bar gone. :-)

Have a nice day! Thanks for your perfect products!
Jan Kuchar

Condor
26 May 2010, 6:38 AM
No, you should keep the <a> tag, but replace the href="#" with href="javascript:void(0)".

This should be done for all href="#" ocurrences in the code.

honzakuchar
26 May 2010, 7:12 AM
Yep, I also mean that <a> is better for this function, it is really light-weight. But in this case it does not work. :-(
20658

We need as focusEl some element wich is focusable. So we have <a>(link), input (text, textarea, ...), button or div with contenteditable. After some searching I found that div with tabindex can be also focused. More information here (http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex). So what about this patch? :)


new Ext.Template(
'<div class="x-grid3" hidefocus="true">',
'<div class="x-grid3-viewport">',
'<div class="x-grid3-header"><div class="x-grid3-header-inner"><div class="x-grid3-header-offset" style="{ostyle}">{header}</div></div><div class="x-clear"></div></div>',
'<div class="x-grid3-scroller"><div class="x-grid3-body" style="{bstyle}">{body}</div><div class="x-grid3-focus" tabIndex="-1"></div></div>',
'</div>',
'<div class="x-grid3-resize-marker"> </div>',
'<div class="x-grid3-resize-proxy"> </div>',
'</div>'
);

Condor
26 May 2010, 7:34 AM
Here is the original bugreport (http://extjs.com/forum/showthread.php?t=77380).

The only solution seems to be not specifying a href for Chrome (but IE needs it).

honzakuchar
26 May 2010, 8:21 AM
this (http://www.extjs.com/forum/showthread.php?77380-CLOSED-DUP-3.0.0-href-quot-quot-with-onclick-quot-return-false-quot) and this (http://www.extjs.com/forum/showthread.php?65396-FIXED-152-3.x-2.x-Ext-sometimes-adds-hashmarks-to-my-URLs) bug is closed or marked as duplicate. So ExtJS will do not resolve this issue? In my app I created override to div with tabindex and it works fine.

I should not have any big problem with a location bar, but it appeares over main navigation, so it is really anonnying.

Jamie Avins
26 May 2010, 10:41 AM
We'll need to look into changing it and how it affects all browsers.

honzakuchar
26 May 2010, 11:48 AM
Ok, it is very reasonable, because it is used really on every step, when using application. So I can afford you litle help with testing. It works without any issue on: (patch: div with tabindex="-1")


Windows 7 x64

Mozilla Firefox 3.6.3: "Mozilla/5.0 (Windows; U; Windows NT 6.1; cs; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3": without any issue
Opera 10.53: "Opera/9.80 (Windows NT 6.1; U; cs) Presto/2.5.24 Version/10.53": without any issue
Google Chrome 5.0.375.55 beta: without any issue
Internet Explorer 8.0.7600.16385: without any issue


Windows XP x32

Internet Explorer 8: without any issue
Internet Explorer 6: I don't have any PC running this browser.
Google Chrome 4.1.249.1064 (45376): without any issue
Google Chrome 5.0.375.55: without any issue
Mozilla Firefox 3.5.9: "Mozilla/5.0 (Windows; U; Windows NT 5.1; cs; rv:1.9.1.9) Gecko/20100315 Firefox/3.5.9 (.NET CLR 3.5.30729)": without any issue



I hope it will help you. Have an nice day!
Jan Kuchar

Jamie Avins
26 May 2010, 12:28 PM
Please understand that a change like this also cannot be made during any patch release as we are changing the structure of a template and people may have selectors and other code based on having very specific tags in place.

honzakuchar
26 May 2010, 1:20 PM
It is OK. I do not want to make any patch release or anything like this. I only want to tell to the world idea and also want to make ExtJS better than ever. That's all. :-)

So now you know the idea and when the right time arrives it will be prepated for implementation. :-)

Have a good time and thank's for your time! ;-)
Jan Kuchar

honzakuchar
23 Dec 2010, 9:40 AM
Hi!
I`m highliting this thread. Today I upgraded to Ext 3.3.1 and there is changed mechanism of getting focusEl. It is not searched by class, but by tag "a". So I have a simple question, what will be next development of this issue?

Have a nice day and merry christmas from Czech Republic! :)

Jan Kuchaƙ