EXTJS 菜单的综合例子

Ext.onReady(function(){
    
	//工具条的创建
	var tb=new Ext.Toolbar();
	tb.render("toolbar");//渲染到div中
	
	var menuHistory=new Ext.menu.Menu({
	  items:[
	  	{text:'今天',
	  	handler:function(){
	  	Ext.Msg.alert("信息提示",'今天')}},
	  	{text:'昨天'},
	  	'-',
	  	{text:'一周'},
	  	{text:'一月'}
	  	]  
	  });
	  
	  //文件按钮的菜单
	var menuFile=new Ext.menu.Menu({
	  id:'menu1',
      //allowOtherMenus: true,
	  items:[
	  {text:'新建'},
	  '-',
	  {text:'打开'},
	  'separator',
	  {text:'保存'},
	  {text:'历史',
	    menu:menuHistory},
	  new Ext.menu.Separator(),
	  {text:'关闭'}
	  ]
	  });
	  //操作按钮的菜单
	var menuOperator=new Ext.menu.Menu({
	  items:[
	  {text:'添加'},
	   '-',
	  {text:'删除'},
	  '-',
	  {text:'修改'}
	    ]
	    
	  });
	  
	  //多选菜单
	 var menuCheckbox=new Ext.menu.Menu({
	 	items:[
	    new Ext.menu.CheckItem({
	      text:'粗体',
	      checked:true,
	      checkHandler:function(item,ch){
	      Ext.Msg.alert('多选',(ch?'选中':'取消')+'粗体');
	          }
	        }),
	         new Ext.menu.CheckItem({
	      text:'斜体',
	      checked:true,
	      checkHandler:function(item,ch){
	      Ext.Msg.alert('多选',(ch?'选中':'取消')+'斜体');
	          }
	        })
	     ]
	 });
	 //单选菜单
	 var menuRadio=new Ext.menu.Menu({
	 	 id:'menuradio',
	 	   allowOtherMenus: true,
	     items:[
	      new Ext.menu.CheckItem({
	       text:'宋体',   
	       group:'font',
	       checkHandler:function(item,ch){
	        Ext.Msg.alert('多选',(ch?'选中':'取消')+'宋体');
	         }
	       }),
	        new Ext.menu.CheckItem({
	       text:'黑体',
	       group:'font',
	       checkHandler:function(item,ch){
	        Ext.Msg.alert('多选',(ch?'选中':'取消')+'黑体');
	         }
	       }),
	        new Ext.menu.CheckItem({
	       text:'楷体',
	       checked:true,
	       group:'font',
	       checkHandler:function(item,ch){
	        Ext.Msg.alert('多选',(ch?'选中':'取消')+'楷体');
	         }
	       }),
	        new Ext.menu.CheckItem({
	       text:'草书',
	       group:'font',
	       checkHandler:function(item,ch){
	        Ext.Msg.alert('多选',(ch?'选中':'取消')+'草书');
	           }
	        })
	       ]
	    });
	    
	    //日期菜单
	    var menuDate=new Ext.menu.DateMenu({
	     handler:function(dp,date){
	      Ext.Msg.alert('选择日期','选择的日期是:'+date.format('Y年m月d日'));
	          }
	       });
	       
	      //颜色框菜单 
	    var menuColor=new Ext.menu.ColorMenu({
	      handler:function(cm,color){
	      if(typeof color=='string'){
	       Ext.Msg.alert('选择颜色','你选择的颜色是'+color);
	      }}});
	      
	      //表单
	    var form=new Ext.form.FormPanel({
	      title:'输入',
	       defaultType:'textfield',
	       labelWidth:60,
	       labelAlign:'right',
	       buttonAlign:'center',
	       border:false,
	       items:[
	       {fieldLabel:'名称',
	        name:'name'}
	             ],
	        buttons:[{
	        text :'确认'},{
	         text:'取消'
	        }]
	       })
	      //将表单添加到菜单中
	    var formMenu=new Ext.menu.Menu({
	       items:[form]
	         });
	         
	   //工具条上增加菜单
	  tb.add({
	    text:'文件',
	    menu:menuFile
	    },{
	    text:'操作',
	    menu:menuOperator
	    },{
	    text:'字形',
	    menu:menuCheckbox
	     },{
	     text:'字体',
	    menu:menuRadio
	     },{
	     text:'日期',
	    menu:menuDate
	     },{
	     text:'颜色',
	    menu:menuColor
	     },{
	     text:'表单菜单',
	     menu:formMenu
	     }
	    );
	//当有新组件加入到已渲染容器或改变子组件的大小/位置之后，就需要执行此函数
	 tb.doLayout();
	 
	//实现点击按钮显示,显示菜单的内容
	 Ext.get('show').on('click',function(){
	   var menu1=new Ext.menu.MenuMgr.get('menu1');
	     menu1.show(tb.el);
	     
	   var radio=new Ext.menu.MenuMgr.get('menuradio');
	      radio.show(menu1.el);
	      
	     // Ext.getDoc().removeAllListeners();
	 });
	 //隐藏所有按钮
	 Ext.get('hide').on('click',function(){
	   Ext.menu.MenuMgr.hideAll();
	 })
	
   })

})