View Full Version : Multiple action with tool tip in menu option

28 Apr 2010, 1:26 AM
We need to show two actions in an ext menu item. So suppose we have a menu which when expanded has an option list. Each option list would have two actions to execute. One on left and another right aligned. When clicking on the left text we need to execute say URL 1 and when we click on the right hand side option we need to execute say URL 2. The right side action would be an icon.

The menu would look something like in the attached screen shot. The pencil icon is the right hand side action i am talking about. The text on the left hand side is the first action.


Please let me know if this is possible and what option to use from ext menu and item to implement this.

3 May 2010, 3:37 PM
You may be able to accomplish this with HTML (I have not tried this with a menu specifically, but have used this technique with other components).
For example, set the html property of the menu item to:

<span onclick="myfunction()">Type=Document...</span><span class="silk-pencil" onclick="myfunction()">&nbsp;</span>

You may need to use additional spans to achieve the bold effect you have in your example above, or if you are not adverse to it like I am, html bold tags.

3 May 2010, 6:19 PM
Do it like this:

var m = new Ext.menu.Menu({
items: [{
text: '<span class="foo">Item 1</span><span class="bar">Item 2</span>',
handler: function(item, e){
var t = Ext.get(e.getTarget());
console.log('you clicked item 1');
console.log('you clicked item 2');
m.showAt([200, 200]);

3 May 2010, 9:17 PM
Thank you very much for the resolution. I was thinking if there is an OOTB support from menu itself for multiple actions. I already tried using HTML but instead of spans I have used DIV as the HTML action container. Hope that should not create any issues or I can switch to SPAN as well.

I am not able to remove the empty space that menu gives by default for icons. Is there a way to remove it?