Extjs之Extjs工具栏和菜单栏

</pre><pre name="code" class="javascript">Ext.onReady(function() {

			var menu = new Ext.menu.Menu();
			menu.add({
						text : 'Button 1',
						menu : [{
									text : '111'
								}, {
									text : '222'
								}, {
									text : '333'
								}]
					});
			menu.add({
						text : 'Button 2',
						menu : [{
									text : '111'
								}, {
									text : '222'
								}, {
									text : '333'
								}]
					});
			menu.add({
						text : '字号',
						menu : [new Ext.menu.CheckItem({
											text : '1号',
											checked : true,
											group : 'single'
										}), new Ext.menu.CheckItem({
											text : '2号',
											group : 'single'
										}), new Ext.menu.CheckItem({
											text : '3号',
											group : 'single'
										})]
					});

			menu.add({
						text : '字体',
						menu : [new Ext.menu.CheckItem({
											text : '加粗',
											checked : true
										}), new Ext.menu.CheckItem({
											text : '斜体'
										}), new Ext.menu.CheckItem({
											text : '渐变'
										})]
					});

			var btn1 = new Ext.Button({
						text : "文件",
						cls : 'x-btn-text-icon',
						menu : [{
									text : "打开"
								}, {
									text : "保存"
								}, {
									text : "删除"
								}, {
									text : "关闭"
								}, {
									text : "退出"
								}]
					});
			var btn2 = new Ext.Button({
						text : "编辑",
						cls : 'x-btn-text-icon',
						menu : [{
									text : "复制"
								}, {
									text : "拷贝"
								}, '-', {
									text : "查找"
								}, {
									text : "替换"
								}]
					});
			var btn = new Ext.Button({
                        text : "其它",
                        cls : 'x-btn-text-icon',
                        menu : [{
                                    text : "选择日期",
                                    menu : new Ext.menu.DateMenu({
                                       handler:function(dp, date){
                                           Ext.Msg.alert('选择日期', '选择的日期为' + date.format('Y年m月d日'));
                                       }
                                    })
                                }, {
                                    text : "选择颜色",
                                    menu : new Ext.menu.ColorMenu()
                                }]
                    });
					
			var toolbar = new Ext.Toolbar({
						width : 300,
						height : 200,
						items : [btn1, btn2, btn],
						renderTo : Ext.getBody()
					});
			
			var showMenuBar = Ext.get("showMenuBar");
			showMenuBar.on("click", function() {
						menu.show(showMenuBar);
					});
		});

右键弹出菜单

Ext.onReady(function(){
    var menu1 = new Ext.menu.Menu({
        items:[{text:'新1'},{text:'新2'},{text:'新3'}]
    });
    
    var menu2 = new Ext.menu.Menu({
        items:[{text:'新2'},{text:'新2'},{text:'新3'}]
    });
    
    var menu3 = new Ext.menu.Menu({
        items:[{text:'新1'},{text:'新2'},{text:'新3'}]
    });
    
        var menu4 = new Ext.menu.Menu({
        items:[{text:'新1'},{text:'新2'},{text:'新3'}]
    });
	
	var context= new Ext.menu.Menu({
	   items:[{text:'111',menu:menu1},{text:'222',menu:menu2},{text:'333',menu:menu3}]
	});
	
	Ext.get(document).on('contextmenu', function(e){
	   e.preventDefault(); // 取消浏览器对右键的默认操作
	   context.showAt(e.getXY());
	})
});