1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    194
    Vote Rating
    -1
    Answers
    2
    hpet is an unknown quantity at this point

      -1  

    Default Answered: Menu containing editable grid - mouse issues

    Answered: Menu containing editable grid - mouse issues


    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.

  2. 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.

  3. #2
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,994
    Vote Rating
    94
    Answers
    181
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    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?
    http://docs.sencha.com/extjs/4.2.1/#...in.CellEditing


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  4. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    194
    Vote Rating
    -1
    Answers
    2
    hpet is an unknown quantity at this point

      0  

    Default


    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.

  5. #4
    Sencha - Support Team
    Join Date
    Feb 2013
    Location
    California
    Posts
    4,994
    Vote Rating
    94
    Answers
    181
    Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice Gary Schlosberg is just really nice

      0  

    Default


    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.


    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager:
    sheryl@sencha.com

  6. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    194
    Vote Rating
    -1
    Answers
    2
    hpet is an unknown quantity at this point

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread