Radio button menu item
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> <style type="text/css"> .icon-accept { background-image: url(accept.png) !important; } </style> </head> <script type="text/javascript"> Ext.onReady(function() { var genericHandler = function(menuItem) { Ext.MessageBox.alert('', 'Your choice is ' + menuItem.text); } var colorAndDateHandler = function(menuItem, choice) { Ext.MessageBox.alert('', 'Your choice is ' + choice); } var colorCheckMenu = { text : 'Check', id : 'colorMenu', menu : { defaults : { checked : false, group : 'colorChkGroup', checkHandler : genericHandler }, items : [ { text : 'Fatal', color : '#ff00ff' }, { text : 'Critical', color : 'red' }, { text : 'Nominal', color : 'green' }, { text : 'Unknown', color : 'yellow' } ] } } var menu = new Ext.menu.Menu({ id : 'myMenu', items : colorCheckMenu, listeners : { 'beforehide' : function() { return false; } } }); menu.showAt([100,100]); }); </script> <body> </body> </html>