一步一步教你搭建ExtJS右键菜单功能

<mce:script type="text/javascript" language="javascript"><!-- Ext.onReady(function(){ /**/ var shortcuts = Ext.get("clientDiv0"); //增加右键点击事件 if(shortcuts){ shortcuts.on('contextmenu',function(e){//声明菜单类型 e.preventDefault();//这行是必须的,Prevents the browsers default handling of the event.阻止浏览器默认的事件处理。 rightClick.showAt(e.getXY());//取得鼠标点击坐标，展示菜单 }); } }); var rightClick = new Ext.menu.Menu({ id :'rightClickCont', items : [{ id:'rmove', text : '删除', //增加菜单点击事件 handler:function (){ alert('我被点击了！'); } }, { id:'rname', text : '重命名' }, { id:'rdetail', text : '详细信息' }, { id:'rattribute', text : '属性' }] }); function sourceShowRightMenu(obj){ //var shortcuts = Ext.get(obj.id+""); var shortcuts = Ext.get(obj.id.toString()); //增加右键点击事件 if(shortcuts){ shortcuts.on('contextmenu',function(e){//声明菜单类型 e.preventDefault();//这行是必须的,Prevents the browsers default handling of the event.阻止浏览器默认的事件处理。 rightClick.showAt(e.getXY());//取得鼠标点击坐标，展示菜单 }); } } // --></mce:script> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv0" style="height: 400px; width: 400px; background-color: blue;"></div> <br /> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv1" style="height: 400px; width: 400px; background-color: blue;"></div> <br /> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv2" style="height: 400px; width: 400px; background-color: blue;"></div> <br /> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv3" style="height: 400px; width: 400px; background-color: blue;"></div> <br /> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv4" style="height: 400px; width: 400px; background-color: blue;"></div> <br /> <div oncontextmenu="sourceShowRightMenu(this);" id="clientDiv5" style="height: 400px; width: 400px; background-color: blue;"></div>