View Full Version : Menu containing editable grid - mouse issues

9 Apr 2014, 12:35 AM
For simplicity and usability issues I decided to put editable grid (small two column, max 3 rows) into a menu container.
Everything apears to be ok except mouse movement seems to take focus away.
When I click in a grid cell it gets focus and I can edit. But, if I click in a grid cell (it gets focus) and I move mouse, editor looses focus.
I think this has something to do with menu it self - tracking mouse, but I am not sure.

EDIT: as I suspected this is due to default menu onMouseOver event handling (taking focus from currently active item prior to setting focus on new item). I overriden onMouseOver event with emptyFn, which is ok for me in this case. Although seems a bit ugly thing to do. Usually this is a good pointer to rethink design.

Gary Schlosberg
10 Apr 2014, 12:45 PM
Glad to hear you found something that worked for you. I have been unable to recreate the behavior you describe -- mouse movement doesn't affect focus as described. Do you see the issue in this doc example?

10 Apr 2014, 10:56 PM
Hello Gary,

No, not like this.
Try this fiddle to reproduce: https://fiddle.sencha.com/#fiddle/511

What happenes:
1. when you enter cell editor, it gets focus as expected, but as soon as you move mouse it takes focus away - this is to my opignion "by menu design" because onMouseOver event is tracking menu items (but I guess it should detect that event source is still within the same menu item and cancel "take focus" actions)

2. 4.1.1 cell editing works for all field types
3. 4.2.1 cell editing works for number and date, not for text, textarea, ...
4. 5.x cell editing doesn't work for any field type

Points 2-4 are related to grid being menu item.
If you override menu mouseover event (onMouseOver: Ext.emptyFn), then everything works in all versions as expected - ofcourse with a lack of tracking mouse over other items in menu, if any.
Version 5.x also shifts columns after editing cell.

Can we treat this as a bug?
Because menu items are basicly container, I think this would be good to "fix".
There are usecases where one wants to put field as a menu item, most often a simple text field, date field, etc. Grid in my example perhaps looks a bit extreme, but in my usecase it fits perfectly and luckly it is the only item - I just needed a quick popup-like solution for a small rarely used grid. Menu container fitted perfectly for this as it automaticaly handles layout, position, closure, etc.

Gary Schlosberg
18 Apr 2014, 4:09 PM
I see the behavior now, thanks for the Fiddle. It is a bit unusual to have a grid inside a menu, but seems to me that it should work. That said, the menu seems to be doing what it should, and the fact that you are able to work around it by overriding the mouseover event makes me think this isn't a bug.

As far as which field types are working, in what way are they not? I couldn't reproduce that.

20 Apr 2014, 5:26 AM
I checked field types again and they are all working if I disable mouseover menu handler.
If you try the fiddle with different extjs versions and different field types as cell editors you should see the behavior (with default menu mouseover handler).
But, as already said, this all comes down to the same thing. I agree, it is not a bug, but perhaps menu mouseover handler could check if "element" is still whitin menu item and cancel actions. I may be off here, but perhaps someone with greater core knowledge would be able to work it out. I also agree, grid in a menu is unusual, but currently it works for my use-case. It is the only item, so it doesn't realy look like a menu, but kind of as a popup.