View Full Version : HtmlEditor inside rowexpander IE issue

15 Dec 2013, 7:46 PM
I have a stange problem with htmleditor inside rowexpander in IE browser. When I expand the row I try to focus programtically to the htmleditor it is not working. After all I click on the html editor and start type in the space key and backspace is not working. That means I am able to type but these two keys not working

Chtome and FF have no issue

My version is ExtJs4.2

Anybody please help

Thanks in advance

Kevin Jackson
17 Dec 2013, 8:16 AM
Which version of IE are you having this difficulty in?

17 Dec 2013, 6:18 PM
I am getting this issue in all IE versions inluding IE9 and 10 . Inside my row expander there is a form panel . The first Item of the form is htmlEditor. As soon as I expand the row I suppose to give focus to the htmleditor, which is not working anyway. So I click on the htmleditor and start typing . In this case I cannot use backspace and space key both are not working. I notice that when I press space key it is actually highlighting the grid row itself. If click two times or double click seems resolving this issue.Chrome and FF doesn't show this behaviour . It works just fine !!. Screen shot attached.

27 May 2014, 9:05 PM
I'm having the same problem with a textarea field on a form panel within the rowexpaner. Exactly the same behaviour and only with IE.
Have you found a solution to that problem?

27 May 2014, 9:56 PM
Hi ,
Oh yes, I have fixed the issue. The problem in IE in this case is when you click on the expander ('+' icon) that row is not actually selected. I found that this issue was not there if we select the row and then click on the expander. So I programmatically trigger row select while expand which resolved the issue

Here is the code snippet

grid.getView().addListener('expandbody', function (rowNode, record, expandRow, eOpts) {
//select row

27 May 2014, 10:05 PM
Great! Wow! Thank you for your fast answer!
In the meantime I possibly solved my problem with adding the following code to the afterrender of my form panel within the rowexpander:

afterrender: {
fn: function() {
this.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);

After first tests it seems to work with IE.