1. #1
    Ext User
    Join Date
    Aug 2008
    Posts
    24
    Vote Rating
    1
    liuzhisheng is on a distinguished road

      0  

    Question How to add menus to a button manually

    How to add menus to a button manually


    The example in document like this:
    HTML Code:
    var btn1=new Ext.Button({
    text:"File",
    menu:[
    {text:"Open"},
    {text:"Save"},
    {text:"Close"}]});
    But I want to add menus to button manually, like:
    HTML Code:
    var btn1=new Ext.Button({text:"File"});
    btn1.addMenu(...);
    of course,addMenu method is not exist, how do I can implement this?

    Thanks.

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,953
    Vote Rating
    636
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Untested, but give this a go:

    Code:
    Ext.override(Ext.Button,
    {
       initComponent: function()
       {
          Ext.Button.superclass.initComponent.call(this);
          this.addEvents(
                "click",
                "toggle",
                'mouseover',
                'mouseout',
                'menushow',
                'menuhide',
                'menutriggerover',
                'menutriggerout'
          );
          if (this.menu)
          {
             var m = this.menu;
             delete this.menu;
             this.setMenu(m);
          }
             
          if (typeof this.toggleGroup === 'string')
             this.enableToggle = true;
       },
       
       setMenu: function(menu)
       {
          var hasMenu = (this.menu != null);
          this.menu = Ext.menu.MenuMgr.get(menu);
          if (this.rendered && !hasMenu)
          {
             this.el.child(this.menuClassTarget).addClass('x-btn-with-menu');
             this.menu.on("show", this.onMenuShow, this);
             this.menu.on("hide", this.onMenuHide, this);
          }
       },
       
       clearMenu: function(destroy)
       {
          if (this.rendered)
          {
             this.el.child(this.menuClassTarget).removeClass('x-btn-with-menu');
             this.menu.un('show', this.onMenuShow, this);
             this.menu.un('hide', this.onMenuHide, this);
          }
          if (destroy)
             Ext.destroy(this.menu);
             
          this.menu = null;
       }
    }
    );
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    21
    Vote Rating
    0
    himanshu24 is on a distinguished road

      0  

    Default Error when applying above code

    Error when applying above code


    Did the Same but getting below error:
    PHP Code:
    TypeErrorthis.el.child(...) is null
    [Break On This Error]     

    this.el.child(this.menuClassTarget).addClass('x-btn-with-menu'); 
    Code:
    var manageColumnsButton = Ext.override(Ext.Button,
        {icon : 'images/manage_columns.png',
        id:'manageColumnsButton',
        
           initComponent: function()
           {
              Ext.Button.superclass.initComponent.call(this);
              this.addEvents(
                    "click",
                    "toggle",
                    'mouseover',
                    'mouseout',
                    'menushow',
                    'menuhide',
                    'menutriggerover',
                    'menutriggerout'
              );
              if (this.menu)
              {
                 var m = this.menu;
                 delete this.menu;
                 this.setMenu(m);
              }
                 
              if (typeof this.toggleGroup === 'string')
                 this.enableToggle = true;
           },
           
           setMenu: function(menu)
           {
              var hasMenu = (this.menu != null);
              this.menu = Ext.menu.MenuMgr.get(menu);
              if (this.rendered && !hasMenu)
              {
                 this.el.child(this.menuClassTarget).addClass('x-btn-with-menu');
                 this.menu.on("show", this.onMenuShow, this);
                 this.menu.on("hide", this.onMenuHide, this);
              }
           },
           
           clearMenu: function(destroy)
           {
              if (this.rendered)
              {
                 this.el.child(this.menuClassTarget).removeClass('x-btn-with-menu');
                 this.menu.un('show', this.onMenuShow, this);
                 this.menu.un('hide', this.onMenuHide, this);
              }
              if (destroy)
                 Ext.destroy(this.menu);
                 
              this.menu = null;
           }
        }
        );

Thread Participants: 2