1. #1
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Location
    Winnipeg, MB
    Posts
    102
    Vote Rating
    0
    rogersja is on a distinguished road

      0  

    Default menu button WITHOUT dropdown arrow

    menu button WITHOUT dropdown arrow


    Hello,

    fairly new to EXT here
    about a week

    virgo.rogerswestgroup.com/complex.html

    thats what ive done so far

    at the bottom i have a bbar in south region with some icon buttons in the right, you'll notice the 'user' icon with a menu arrow just to the right that opens a menu.

    well i would like to have that button open said menu but without that pesky little black arrow.

    anyone know how, have an idea, or has done this before?

    Thanks so much
    Cheers,
    Jason

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,899
    Vote Rating
    623
    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


    Well, you could do something like:

    Code:
    myButton.on('click', function()
    {
       menu.show(myButton.getEl(), myButton.menuAlign)
    }
    );
    The app looks cool, by the way.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    48
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I'm getting

    Code:
    Ext.ToolBar is not a constructor
    http://virgo.rogerswestgroup.com/complex.html
    Line 191
    But on the question, couldn't you just poke the element with Firebug, see what styling rules are giving it that arrow, and override them with your own rules?

  4. #4
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Location
    Winnipeg, MB
    Posts
    102
    Vote Rating
    0
    rogersja is on a distinguished road

      0  

    Default


    Hello

    Thank you for the suggestions.

    I do like the css override idea best, i think.

    but not exactly sure how to do so. I'm not that up on css myself.

    fire bug says that it is line 303 that is responsible for padding the button to allow the arrow some room to be seen, and line 275 that is responsible for supplying the path to the gif that is the arrow.

    now i would assume that i would have to override both line 303 for the padding, its change would be:
    padding-right: 0px;
    and line 275 would need to be changed to remove the image path.

    not sure how to implement this override for just this one button.

    again the source can be viewed at: virgo.rogerswestgroup.com/complex.html

    Thanks again
    Cheers,
    Jason

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,899
    Vote Rating
    623
    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


    This would also work:

    Code:
    b.on('render', function()
    {
       this.el.child(this.menuClassTarget).removeClass('x-btn-with-menu');
    }, b);
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Location
    Winnipeg, MB
    Posts
    102
    Vote Rating
    0
    rogersja is on a distinguished road

      0  

    Default


    Sorry i am confused how i am to implement your suggestion.

  7. #7
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,899
    Vote Rating
    623
    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


    Code:
    items: 
    [
    {
       iconCls:'imicon',
       menu:[{text:'test'}]
       listeners:
       {
          'render': function(b)
          {
             b.el.child(b.menuClassTarget).removeClass('x-btn-with-menu');
          }
       }
    }
    ]
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Sencha User rogersja's Avatar
    Join Date
    Sep 2008
    Location
    Winnipeg, MB
    Posts
    102
    Vote Rating
    0
    rogersja is on a distinguished road

      0  

    Default


    Oh thanks so much

    Now i see how it works,
    greatly appreciated

    Cheers,
    Jason

  9. #9
    Sencha User
    Join Date
    Oct 2011
    Location
    Pakistan
    Posts
    229
    Vote Rating
    1
    umr.ashrf is on a distinguished road

      0  

    Default


    Code:
    {
        xtype: 'button',
        arrowCls: ''
    }
    This will hide arrow even there is menu.

Thread Participants: 3