Results 1 to 5 of 5

Thread: How to keep a custom Ext.menu.Menu uncut when overflowing the frame

  1. #1
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    10

    Default Answered: How to keep a custom Ext.menu.Menu uncut when overflowing the frame

    Hello everyone,

    I'm posting here because I'm getting trouble trying to apply a correct behavior to a custom menu.

    I can't use standard ext.button.button with an integrated menu, because of this : https://www.sencha.com/forum/showthr...-button-Button

    But as you can see on this fiddle : https://fiddle.sencha.com/#fiddle/2rpv&view/editor
    If the menu overflows the frame, it's automatically moving to the left, so the menu remains uncut.

    This next fiddle doesn't work unfortunatly, but show what workaround I've been using to have a panel that open a menu: https://fiddle.sencha.com/#fiddle/2rq0&view/editor
    It's working fine in my development environment, but now the menu is going outside the frame if too long, as you can see on the picture below:

    menu_overflowing.jpg

    I would like to find a way to automatically move the menu to the left, or find a way to align the right side of the menu with the right side of it's container (an Ext.panel.Panel).
    The right align is managed in the button element (https://www.sencha.com/forum/showthr...t-in-Ext-4-1-3), so I don't know how to do.

    Is there someone here that can help me?

    Anyway, thanks a lot and have a nice week

  2. In any case I think the modifications you did on the fiddle will not work for me, because you set the rendering constraint on the "button" panel
    In the fiddle the modifications are applied to the "panel". A panel is not and should not ever be used as a button. Why the choice of a panel to make a button and not a tool assigned to the main panel header? This would make more sense and be more clear to the user. Demonstrated in the fiddle below is the solution from this post back in 2013.


  3. #2
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147
    Answers
    15

    Default

    Here is a fiddle that keeps it on the view


    Notice how I've added constrain: true, constrainTo: Ext.getCmp('mainPanel'), and also changed renderTo: document.body to renderTo: Ext.getCmp('mainPanel'). I did ad an id: 'mainPanel' to the topmost panel.
    Andy Allord
    Sencha MVP/Software Engineer

  4. #3
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    10

    Default

    Quote Originally Posted by aallord View Post
    Here is a fiddle that keeps it on the view

    Notice how I've added constrain: true, constrainTo: Ext.getCmp('mainPanel'), and also changed renderTo: document.body to renderTo: Ext.getCmp('mainPanel'). I did ad an id: 'mainPanel' to the topmost panel.
    Thank you for replying aallord.

    I tried what you suggested, constraining the menu rendering to the main panel seems a good idea. My attempts to do it weren't successful so far unfortunatly.

    In any case I think the modifications you did on the fiddle will not work for me, because you set the rendering constraint on the "button" panel that trigger the menu, not on the menu itself.
    This panel is always at the right position because it is relatively positioned to its container. The menu though is absolutly positionned, and is not moving when it overflows the frame.

    I tried to apply your suggestions to the menu then to the menu container, but it did not work

  5. #4
    Sencha MVP Team Member
    Join Date
    Sep 2016
    Location
    Kennewick, WA
    Posts
    147
    Answers
    15

    Default

    In any case I think the modifications you did on the fiddle will not work for me, because you set the rendering constraint on the "button" panel
    In the fiddle the modifications are applied to the "panel". A panel is not and should not ever be used as a button. Why the choice of a panel to make a button and not a tool assigned to the main panel header? This would make more sense and be more clear to the user. Demonstrated in the fiddle below is the solution from this post back in 2013.

    Andy Allord
    Sencha MVP/Software Engineer

  6. #5
    Sencha Premium User
    Join Date
    Apr 2019
    Posts
    10

    Default

    Quote Originally Posted by aallord View Post
    In the fiddle the modifications are applied to the "panel". A panel is not and should not ever be used as a button. Why the choice of a panel to make a button and not a tool assigned to the main panel header? This would make more sense and be more clear to the user. Demonstrated in the fiddle below is the solution from this post back in 2013.

    Hello aallord,

    Thanks a lot for your replies. Sorry for the delay of my reaction, I wasn't working the last week.

    I tried to adapt your solution to my code and it works!
    It's indeed far better to create the menu in the controllers than add it randomly in my components tree.

    I did not used a tools because I need specific settings on the button, but here is a view of what I did:



    I created the menu in the controller of "mainPanel". "buttonPanel" is the blue part on my screen below, where I wanted to align the menu's right side with.

    I got one last bug though: the first time I click on the panel, the menu is not correctly aligned.

    first_opening_bug.png

    I don't get from where this bug comes. If I close the menu then open it again, it's always correctly aligned after that. But the first opening is always at the wrong place.


    Maybe you know why?

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •