1. #1
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default Some suggestions for the Menu

    Some suggestions for the Menu


    Hey Jack and the rest,

    While creating a custom menu component i bumped into some minor problems.
    I created workarounds for most of them but i think by changing some small things in the menu will help making it more extendible.

    Here are my foundings. Probably most of them you already thought of (tefal) and probably I haven't found how i should use it.

    One of the things is that in your autoWidth function on Menu doesnt look at minWidth for users not using IE.
    Code:
    autoWidth : function(){
            var el = this.el, ul = this.ul;
            if(!el){
                return;
            }
            var w = this.width;
            if(w){
                el.setWidth(w);
            }else if(Ext.isIE){
                el.setWidth(this.minWidth);
                ........
    This is how I worked around it:
    Code:
            var m = aToolbarButton.menu;
            m.width = 131;
    Dont know if this is the wanted behaviour (It probably is for a good reason), but I wanted to note it anyway.

    Secondly it would be nice to be able to choose from wich element the submenus will expand for a whole menu.

    This is how I had to do this now:
    Code:
            var m = aToolbarButton.menu;
            var items = m.items.items, l = items.length;
            for(var i = 0; i < l; i++){
                var item = items[i];
    
                var im = item.menu;
    
                item.subMenuFrom = m.getEl();
                item.expandMenu = function(autoActivate){
                    var el = this.subMenuFrom || this.container;
                    if(!this.disabled && this.menu){
                        if(!this.menu.isVisible()){
                            this.menu.show(el, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
                        }
                        if(autoActivate){
                            this.menu.tryActivate(0, 1);
                        }
                    }
                };
            }
    So what I'm saying is that it would be a good idea to give a menu item a config property called subMenuFrom and change .expandMenu to check if you configured the property, or that it should use the default.

    Last, I think it would be nice to be able to set the shadow property for a menu at once.

    All by all, this is the whole block of code I used to do this all, but I think this could be alot smaller if some changes to the Menu would be applied (or if I knew how the menu works better)
    Code:
            var m = newBtn.menu;
            m.shadow = false;
            m.width = 131;
    
            mel = m.getEl();
            mel.addClass('x-menubar-block-menu-left');
            m.autoWidth();
    
            var items = m.items.items, l = items.length;
            for(var i = 0; i < l; i++){
                var item = items[i];
    
                var im = item.menu;
                im.width = 130;
                im.shadow = false;
                im.getEl().addClass('x-menubar-block-menu-right');
    
                item.subMenuFrom = newBtn.menu.getEl();
                item.expandMenu = function(autoActivate){
                    var el = this.subMenuFrom || this.container;
                    if(!this.disabled && this.menu){
                        if(!this.menu.isVisible()){
                            this.menu.show(el, this.parentMenu.subMenuAlign || "tl-tr?", this.parentMenu);
                        }
                        if(autoActivate){
                            this.menu.tryActivate(0, 1);
                        }
                    }
                };
            }
    
            newBtn.el.child('img', true).src = icon;
        },
    Thanks for your time, as allways!

  2. #2
    Ext User
    Join Date
    May 2007
    Posts
    5
    Vote Rating
    0
    Zuni is on a distinguished road

      0  

    Default minWidth fix for non-IE

    minWidth fix for non-IE


    As you pointed out, menu minWidth was not working for non-IE browsers.

    at the autoWidth function:

    Code:
            var w = this.width;
            if(w)
            {
                el.setWidth(w);
            }
            else if(Ext.isIE){
                el.setWidth(this.minWidth);
                var t = el.dom.offsetWidth;             
                el.setWidth(ul.getWidth()+el.getFrameWidth("lr"));
            }
    add this:

    Code:
            else
            {
                if(this.minWidth > el.getWidth())
                {
                    el.setWidth(this.minWidth);    
                }
            }
    And you got minWidth working for non-IE too.

Similar Threads

  1. Button with Menu (menu auto show/hide)
    By fafhrd in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 23 Mar 2007, 12:19 AM
  2. Ext.menu.Menu.items: How to add a handler to existing items?
    By oxi in forum Ext 1.x: Help & Discussion
    Replies: 4
    Last Post: 15 Mar 2007, 10:49 PM
  3. Function suggestions
    By TommyMaintz in forum Community Discussion
    Replies: 0
    Last Post: 29 Dec 2006, 11:15 AM
  4. Suggestions Plz..
    By techno_adi in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 18 Sep 2006, 9:28 PM

Thread Participants: 1