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();
	 })
	
   })

})